<p>跨域报错是前端开发中非常经典的一个错误，报错如下</p> 讯享网
Access to XMLHttpRequest at '......' from origin
'......' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
跨域错误源自于浏览器的同源策略，想要解决跨域首先要知道什么是同源策略？
同源策略：著名的安全策略，URL有三个基本组成部分：协议+域名或ip+端口，三个必须完全相同称之为同源，不同源的称之为跨域
URL 与 URL 对比:
http://localhost:3000/
https://localhost:3000/ 不同源：协议不同
http://localhost:3000/
http://127.0.0.1:3000/ 不同源：域名或ip不同
http://localhost:3000/
http://localhost:3001/ 不同源：端口不同
http://localhost:3000/
http://localhost:3000/ 同源
http://127.0.0.1:3000/
http://127.0.0.1:3000/ 同源
注意：同源策略不是服务器行为，而是浏览器的行为，服务器会正常响应请求，但是如果不同源会被浏览器拦截
搭建一个express服务器用来演示跨域报错
安装express
在app.js文件中
在views/index.html文件中
打开浏览器访问http://127.0.0.1:3000/
(1）调用getIpTest发送请求不会报错，因为浏览器地址栏访问的服务器是http://127.0.0.1:3000/ ，而方法内发送请求的URL也是http://127.0.0.1:3000/ ，视为同源
(2）调用getDnameTest发送请求报错，因为浏览器地址栏访问的服务器是http://127.0.0.1:3000/ ，而方法内发送请求的URL也是http://localhost:3000/ ，视为跨域
Access to XMLHttpRequest at 'http://localhost:3000/......' from origin
'http://127.0.0.1:3000' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
打开浏览器访问http://localhost:3000/
(3）调用getDnameTest发送请求不会报错，因为浏览器地址栏访问的服务器是http://localhost:3000/ ，而方法内发送请求的URL也是http://localhost:3000/ ，视为同源
(4）调用getIpTest发送请求报错，因为浏览器地址栏访问的服务器是http://localhost:3000/ ，而方法内发送请求的URL也是http://127.0.0.1:3000/ ，视为跨域
Access to XMLHttpRequest at 'http://127.0.0.1:3000/......' from origin
'http://localhost:3000' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
在main.js中
在views/About.vue中
脚手架项目端口是8080而请求的express服务器端口是3000，不满足同源策略，发送请求报跨域错误
Access to XMLHttpRequest at 'http://127.0.0.1:3000/......' from origin
'http://127.0.0.1:8080' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
1.配置代理服务器
在vue.config.js文件中
(修改后需要重启脚手架项目）
在views/About.vue文件中
原理：
跨域是浏览器的安全策略，服务器和服务器之间发送请求没有跨域
在启动脚手架的时候会启动一个内置web服务器
请求的时候浏览器实际并没有直接和需要请求的服务器通信，而是通过内置的web服务器在中转
注意：
项目上线需要把打包后的文件放在服务器上运行，而不是启动脚手架运行，也就没有内置web服务器做代理，所以此方式只适用于开发测试阶段
上线时一般后端解决跨域问题
需要使用nginx代理或者服务器配置cors(每种语言有自己不同的配置方式)
express中处理跨域需要使用cors模块
在app.js文件中
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/166248.html