


How does vue solve the front-end cross-domain problem in axios request (detailed example)
This article brings you relevant knowledge on how vue solves front-end cross-domain problems in axios requests. I hope it will be helpful to everyone.
There are many solutions to cross-domain problems in normal development. The most common one is that the backend modifies the response header. But the front end can also be solved through reverse proxy. In order to prevent such mistakes from happening next time, record and summarize them.
So now let’s review it and solve it.
1. Why do cross-domain problems occur?
Cross-domain: When the browser requests resources from a webpage of one domain name to another domain name, if the domain name, port, or protocol are different, it is cross-domain.
In the front-end and back-end separation mode, the domain names of the front and back ends are inconsistent, and cross-domain access problems will occur. The cross-domain problem comes from JavaScript's same-origin policy, that is, only if the protocol, host name, and port number (if present) are the same, mutual access is allowed. In other words, JavaScript can only access and operate resources in its own domain, but cannot access and operate resources in other domains. Cross-domain issues are for JS and ajax. Axios is an encapsulation of ajax technology through Promise, and there are also cross-domain problems.
2. Solution
Here I will use the local machine to open two different ports for testing.
Error reported before cross-domain processing is not processed
This is how the request is not processed across domains
axios.get('http://localhost:8080/getData') .then(res => { console.log(res) }) .catch(err => { console.error(err); })
Reverse proxy
The front end performs reverse proxy to solve cross-domain problems. The schematic diagram is as follows:
The port of the vue project is 8081
My computer has opened a port 8080, request /getData will put back the json data.
Configure proxy
1. In vue2.0
Modify the index.js file in the config folder and add the following to proxyTable Code:
proxyTable: { '/apis': { target: 'http://localhost:8080/', //要解决跨域的接口的域名 secure:false, //如果是https接口,需要配置这个参数 changeOrigin: true, // 如果接口跨域,需要进行这个参数配置 pathRewrite: { '^/apis': '' // 路径重写 } }, },
Then write this in axios in the request
axios.get('apis/getData') .then(res => { console.log(res) }) .catch(err => { console.error(err); })
Analysis:
What follows the target is the public part of the URL that needs to be requested, and then use /apis to proxy This, finally rewrite some paths, and use our proxy's apis as a prefix when making requests.
We can customize this prefix. proxyTable is an object, so we can configure multiple proxies.
Cross-domain solution
2. After the scaffolding of
vue-cli3 is completed in vue3.0 , there is no vue.config.js file in the project directory, you need to manually create
to create a new vue.config.js and configure the following information, which can also be solved.
module.exports = { devServer: { proxy: { '^/api': { target: 'http://localhost:8080/',//接口的前缀 ws:true,//代理websocked changeOrigin:true,//虚拟的站点需要更管origin pathRewrite:{ '^/api':''//重写路径 } } } } }
Summary:
changeOrigin: true: Turn on the proxy: A fake server will be created locally, then send the requested data and receive the requested data at the same time, so The server and the server can interact with data.
apis is the prefix of the actual request of the interface, which proxies the public part of our actual interface prefix, which is the protocol host name and port number
For example, the request interface is localhost:8080/getData We Just pass in: getData
Then the public domain name is localhost:8080/, we are changing the public domain name localhost:8080/ of the request interface to api/!
Run the project When you look up, you can see that the path of the interface request is: localhost:8081/apis/getData
. After entering the proxy, the actual request path is: localhost:8080/getData
[Related recommendations: "vue.js tutorial"】
The above is the detailed content of How does vue solve the front-end cross-domain problem in axios request (detailed example). For more information, please follow other related articles on the PHP Chinese website!

useState()iscrucialforoptimizingReactappperformanceduetoitsimpactonre-rendersandupdates.Tooptimize:1)UseuseCallbacktomemoizefunctionsandpreventunnecessaryre-renders.2)EmployuseMemoforcachingexpensivecomputations.3)Breakstateintosmallervariablesformor

Use Context and useState to share states because they simplify state management in large React applications. 1) Reduce propdrilling, 2) The code is clearer, 3) It is easier to manage global state. However, pay attention to performance overhead and debugging complexity. The rational use of Context and optimization technology can improve the efficiency and maintainability of the application.

Using incorrect keys can cause performance issues and unexpected behavior in React applications. 1) The key is a unique identifier of the list item, helping React update the virtual DOM efficiently. 2) Using the same or non-unique key will cause list items to be reordered and component states to be lost. 3) Using stable and unique identifiers as keys can optimize performance and avoid full re-rendering. 4) Use tools such as ESLint to verify the correctness of the key. Proper use of keys ensures efficient and reliable React applications.

InReact,keysareessentialforoptimizinglistrenderingperformancebyhelpingReacttrackchangesinlistitems.1)KeysenableefficientDOMupdatesbyidentifyingadded,changed,orremoveditems.2)UsinguniqueidentifierslikedatabaseIDsaskeys,ratherthanindices,preventsissues

useState is often misused in React. 1. Misunderstand the working mechanism of useState: the status will not be updated immediately after setState. 2. Error update status: SetState in function form should be used. 3. Overuse useState: Use props if necessary. 4. Ignore the dependency array of useEffect: the dependency array needs to be updated when the state changes. 5. Performance considerations: Batch updates to states and simplified state structures can improve performance. Correct understanding and use of useState can improve code efficiency and maintainability.

Yes,ReactapplicationscanbeSEO-friendlywithproperstrategies.1)Useserver-siderendering(SSR)withtoolslikeNext.jstogeneratefullHTMLforindexing.2)Implementstaticsitegeneration(SSG)forcontent-heavysitestopre-renderpagesatbuildtime.3)Ensureuniquetitlesandme

React performance bottlenecks are mainly caused by inefficient rendering, unnecessary re-rendering and calculation of component internal heavy weight. 1) Use ReactDevTools to locate slow components and apply React.memo optimization. 2) Optimize useEffect to ensure that it only runs when necessary. 3) Use useMemo and useCallback for memory processing. 4) Split the large component into small components. 5) For big data lists, use virtual scrolling technology to optimize rendering. Through these methods, the performance of React applications can be significantly improved.

Someone might look for alternatives to React because of performance issues, learning curves, or exploring different UI development methods. 1) Vue.js is praised for its ease of integration and mild learning curve, suitable for small and large applications. 2) Angular is developed by Google and is suitable for large applications, with a powerful type system and dependency injection. 3) Svelte provides excellent performance and simplicity by compiling it into efficient JavaScript at build time, but its ecosystem is still growing. When choosing alternatives, they should be determined based on project needs, team experience and project size.


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

Dreamweaver Mac version
Visual web development tools

WebStorm Mac version
Useful JavaScript development tools

EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function

mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
