后端接口域名為：http://127.0.0.1:5000
前端部署在：http://127.0.0.1:8080

當前端調用后端接口時，報錯:

Access to XMLHttpRequest at 'http://127.0.0.1:5000/policy/create/23082' from origin 'http:8080/home/#/policy:1 Access to XMLHttpRequest at 'http://127.0.0.1:5000/policy/create/23082' from origin 'http://127.0.0.1:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

什么是跨域

跨域指瀏覽器不允許當前頁面的所在的源去請求另一個源的數據。源指協議，端口，域名。只要這個3個中有一個不同就是跨域。 這里列舉一個經典的列子：

#協議跨域
http://a.baidu.com訪問https://a.baidu.com；
#端口跨域
http://a.baidu.com:8080訪問http://a.baidu.com:80；
#域名跨域
http://a.baidu.com訪問http://b.baidu.com；

出現跨越一般就是判斷三個地方，http協議，請求地址，端口號，三者若有一處不相同，那么就會出現跨域，解決這個問題就要配置一個代理服務器，通過代理服務器實現跨域請求。

如何解決

要訪問的路徑為：http://127.0.0.1:5000/v1/policy/create

代碼：

1.根目錄下vue.config.js文件

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  //  解決跨域問題
  devServer: {
        // 配置多個代理
        proxy: {
            "apis/": {
                     target: "http://127.0.0.1:5000/",// 要訪問的接口域名
                     changeOrigin: true, //開啟跨域
                     pathRewrite: {
                       '^/apis': '' //這里理解成用'/apis'代替target里面的地址,比如我要調用'http://127.0.0.1:5000/v1/policy/create'，直接寫'/apis/v1/policy/create'即可
                     }
        }
        }
}})

2.在axios請求時的baseURL由127.0.0.1:5000改為/apis

baseURL:"/apis",

3.請求相關代碼

methods: {
            onSubmit() {
              console.log('調用出單接口');
              const url='/v1/policy/create/'+this.value
              const res=this.$request.post(url,this.policyForm)
              console.log(res)}
}

效果

路徑中有apis代理接收到時，會轉發到127.0.0.1:5000上。