vue-cli跨域访问解决

后端接口域名为：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上。