Let's talk about the causes and solutions of Vue Router cross-domain error reporting

Vue Router cross-domain error reporting is a very common problem. When using Vue Router, if you access another website or API across domains, a cross-domain error will occur. This article will introduce the causes and solutions of cross-domain errors in Vue Router.

1. Cross-domain reasons

In browsers, the same-origin policy is a security mechanism that restricts JavaScript under a website to only access resources under that site. The same-origin policy does not allow cross-domain access to data in other domains through scripts, such as using Ajax in a page under one domain name to call an API interface under another domain name. This is because doing so creates security issues and allows attackers to steal users' sensitive information through cross-domain scripting.

2. Cross-domain error reporting of vue-router

Vue Router routing is based on the browser, so it is also restricted by the same-origin policy. When we use Vue Router in a Vue component to access another site or API interface, a cross-domain error will occur. The error message is generally:

Access to XMLHttpRequest at 'http://xxxxxx' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin ' header is present on the requested resource.

This cross-domain error prompts a CORS error, because the browser limits requests to other domain names, and other sites do not allow cross-domain requests for your site's resources. If you are using a local server, you may encounter this problem because your server may not be configured with CORS, which is required for Vue Router cross-domain requests.

3. Methods to solve cross-domain error reporting

1. Use back-end proxy

Back-end proxy can bypass cross-domain restrictions. By sending a request to another site and receiving a response, the server completes the request and response, and processes the requested resources and response data respectively. In the frontend code we just send the request to the URL of the backend proxy and then in the backend proxy we send the request to the target URL and return the received response to the frontend. The following is a sample code:

// 前端代码
fetch('/api').then(res => {
  console.log(res)
})

// 服务器代理代码
app.get('/api', (req, res) => {
  axios.get('http://othersite.com/api').then(response => {
    res.json(response.data)
  }).catch(error => {
    console.log(error)
  })
})

2. Configuring CORS

If you want to directly access cross-domain APIs or resources through the browser, you can configure the server's CORS yourself. Set the Access-Control-Allow-Origin header on the server to allow cross-origin requests. Here are some common CORS configuration examples:

• Node.js (Express):

  res.header("Access-Control-Allow-Origin", "*")
  res.header("Access-Control-Allow-Headers", "X-Requested-With,Content-Type")
  res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS")
  next()

  Copy after login

• Apache:

  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>

  Copy after login

• Nginx:

  add_header 'Access-Control-Allow-Origin' '*';
  add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
  add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization';
  add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';

  Copy after login

4. Summary

Vue Router cross-domain error reporting is a very common problem when developing using the Vue.js framework , deeply understand the problem, help solve cross-domain issues, and use backend proxy and CORS configuration to avoid CORS errors, which can not only improve development efficiency, but also effectively improve code quality. The above are the causes of cross-domain errors reported by Vue Router and the two solutions.

The above is the detailed content of Let's talk about the causes and solutions of Vue Router cross-domain error reporting. For more information, please follow other related articles on the PHP Chinese website!