Vue has set up a simple request, but there are still cross-domain problems.

1. The error in the front-end browser is as follows:

Access to XMLHttpRequest at http://xxx.xxx from origin "http://localhost:8000" has been blocked by CORS policy: Response to preflight request doesn"t pass access control check: Redirect is not allowed for a preflight request.

2.axios encapsulation

Encapsulation Code

modified on the basis of encapsulation

// axios
const service = axios.create({
  baseURL: process.env.BASE_API, // api  base_url
  timeout: 5000, // 
  headers: { "Content-Type": "multipart/form-data" }
})
//headersoptions

if (config.method === "post") {
      config.data = qs.stringify({
        ...config.data
      })
    }
    //

but after modification, an options will still be sent for the first time, and the request for options is 302

Cors axios vue.js

Apr.26,2022

1.options request is a pre-request initiated by the front end when sending cross-domain requests. This is the behavior of the browser
2. The backend should process the options request, which should not return 302,200, otherwise the subsequent get or post requests will not be sent

proxyTable has been adopted to solve

proxyTable: {
      "/api": {
        target: "https://xxx.com",
        secure: false,
        changeOrigin: true,
        pathRewrite: {
          "^/api": ""
        }
      }
    },

baseUrl remember to set = "" is empty

in the development environment, Chrome can be set to allow cross-domain Baidu to know

Previous: Js regularly matches the src value in img in span.

Next: How to refresh vue-router manually when entering the page