目录
一、了解同源策略
此节转自:https://blog.csdn.net/hzw2017/article/details/127602553
在前端本地环境在调用第三方接口,常会遇到No 'Access-Control-Allow-Origin' header is present on the requested resource
错误,这是因为浏览器的同源策略拒绝了我们的请求。
1、什么是同源?
如果两个url的协议、域名、端口相同,就称这两个url是同源
比如http://xxx.com:80/index.html和 http://xxx.com:80/dir/index.html 是同源, 而 https://xxx:80/index.html和http://xxx:80/index.html不同源,因为协议不同。
2、同源策略主要表现在DOM、Web数据和Web网络三个层面:
DOM:限制了来自不同源的js脚本对当前的DOM对象的读和写操作; Web数据:限制了不同源的站点读取当前站点的Cookie、indexDB、LocalStorage等数据。 Web网络:不能通过XMLHttpRequest或Fetch进行跨域请求。
同源策略的出发点是好的,保护数据的安全性,但也影响着开发的便利性,给开发者造成困难,比如不能正常访问非同源的第三方网络接口。
对于网络请求,我们可以用nginx来代理转发接口,避开浏览器同源策略的限制。
二、实施解决跨域问题
1、安装nginx软件并启动
安装见:https://www.topunix.com/post-4050.html
2、核心—配置nginx文件
(1)两个位置放置文件
/usr/local/nginx/conf /usr/local/nginx/conf.d
(2)/usr/local/nginx/conf下的文件
nginx.conf 这个文件可以配置网站相关信息,我们只是用它做调用使用。
include /usr/local/nginx/conf.d/*.conf;
(3)/usr/local/nginx/conf下的文件
下面的文件有两个,通过上述nginx.conf进行调用:
5009fx.conf——用于5009反向代理地址127.0.0.1:5019 5009ky.conf——用于5029反向代理域外服务器http://222.71.190.70:7070:
3、配置文件下载
/usr/local/nginx/conf/nginx.conf /usr/local/nginx/conf.d/5009fx.conf /usr/local/nginx/conf.d/5009ky.conf
4、配置完成重启nginx
方法1:重新加载配置文件
/usr/local/nginx/sbin/nginx -s reload
方法2:重启nginx
(1)关闭nginx
ps -ef|grep -v grep|grep nginx
kill -9 14571 kill -9 15737
(2)启动nginx
cd /usr/local/nginx/sbin ./nginx
5、端口映射
最终需要将5009,5029端口映射到公网。