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

admin管理员组

文章数量:1794759

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: '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); })

本文标签： AccessXMLHttpRequestVueproxyTableXXXXXX