vue使用proxyTable进行跨域设置Access to XMLHttpRequest at ‘XXXXX‘ from origin ‘XXXXXX‘ has been blocked by C

 跨域报错内容

Access to XMLHttpRequest at 'XXXXX' from origin 'XXXXXX' 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.

　跨域问题的出现是因为浏览器的同源策略问题，所谓同源:就是两个页面具有相同的协议（protocol），主机（host）和端口号（port），它是浏览器最核心也是最基本的功能，如果没有同源策略我们的浏览器将会十分的不安全，随时都可能受到攻击。当，协议名，域名，端口号，三者有一个不同都会发生跨域问题

 解决方式有多中，这里主要讲proxyTable方式的处理过程

找到目录

配置标签里

 设置跨域内容

 proxyTable: {
        '/api': {  // 这里的/api表示前端项目的根目录
          target: 'https://xxx/send',  // 目标接口域名
          changeOrigin: true,  // 是否跨域
          secure: true, // 如果是 https ,需要开启这个选项
          pathRewrite: {
          "/wwp" // 重写接口，将以/api开头的前端请求如：localhost:3000/api/xxx
                              //改成后端请求，如后端端口为8081，则为localhost:8081/api/xxx
          }
        }
       }

 调用

 

 var data={"phone":"1389xxx406"};
      this.axios.post('api/wwp',data)
               .then(function (response) {
                 console.log(response);
               })
               .catch(function (error) {
                 console.log(error);
               })