search
HomeWeb Front-endFront-end Q&AHow 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.

How does vue solve the front-end cross-domain problem in axios request (detailed example)

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

How does vue solve the front-end cross-domain problem in axios request (detailed example)

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:

How does vue solve the front-end cross-domain problem in axios request (detailed example)

The port of the vue project is 8081

How does vue solve the front-end cross-domain problem in axios request (detailed example)

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

How does vue solve the front-end cross-domain problem in axios request (detailed example)

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!

Statement
This article is reproduced at:掘金. If there is any infringement, please contact admin@php.cn delete
Optimizing Performance with useState() in React ApplicationsOptimizing Performance with useState() in React ApplicationsApr 27, 2025 am 12:22 AM

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

Sharing State Between Components Using Context and useState()Sharing State Between Components Using Context and useState()Apr 27, 2025 am 12:19 AM

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.

The Impact of Incorrect Keys on React's Virtual DOM UpdatesThe Impact of Incorrect Keys on React's Virtual DOM UpdatesApr 27, 2025 am 12:19 AM

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.

Understanding Keys in React: Optimizing List RenderingUnderstanding Keys in React: Optimizing List RenderingApr 27, 2025 am 12:13 AM

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

Common Mistakes to Avoid When Working with useState() in ReactCommon Mistakes to Avoid When Working with useState() in ReactApr 27, 2025 am 12:08 AM

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.

React's SEO-Friendly Nature: Improving Search Engine VisibilityReact's SEO-Friendly Nature: Improving Search Engine VisibilityApr 26, 2025 am 12:27 AM

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

React's Performance Bottlenecks: Identifying and Optimizing Slow ComponentsReact's Performance Bottlenecks: Identifying and Optimizing Slow ComponentsApr 26, 2025 am 12:25 AM

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.

Alternatives to React: Exploring Other JavaScript UI Libraries and FrameworksAlternatives to React: Exploring Other JavaScript UI Libraries and FrameworksApr 26, 2025 am 12:24 AM

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.

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

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

Hot Tools

Safe Exam Browser

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

Dreamweaver Mac version

Visual web development tools

WebStorm Mac version

WebStorm Mac version

Useful JavaScript development tools

EditPlus Chinese cracked version

EditPlus Chinese cracked version

Small size, syntax highlighting, does not support code prompt function

mPDF

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),