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

  1. 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

.
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

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1be5709-31783.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1be5709-31783.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?