共计 1418 个字符，预计需要花费 4 分钟才能阅读完成。
跨域是指 a 页面想获取 b 页面资源，如果 a、b 页面的协议、域名、端口、子域名不同，或是 a 页面为 ip 地址，b 页面为域名地址，所进行的访问行动都是跨域的，而浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源
Nginx 作为反向代理服务器，就是把 http 请求转发到另一个或者一些服务器上。通过把本地一个 url 前缀映射到要跨域访问的 web 服务器上，就可以实现跨域访问。对于浏览器来说，访问的就是同源服务器上的一个 url。而 nginx 通过检测 url 前缀，把 http 请求转发到后面真实的物理服务器
一. 配置 Nginx
废话不多说, 我们直接打开 nginx.conf 文件
server {
listen 8888;
server_name 127.0.0.1;
location / {
proxy_pass http://127.0.0.1:5500;
}
location /api{
proxy_pass http://ip.taobao.com/;
}
}
配置解释：
我们在浏览器中输入 127.0.0.1:8888 自动会转发到 http://127.0.0.1:5500
http://127.0.0.1:5500 是本地所指向的地址，类似于 vue 开的的代理 npm run dev 启动的一个地址
http://ip.taobao.com/ 是我们要访问的接口地址(淘宝检测 ip 地址来源的接口)
前端 ajax 的 url 地址 这样写 http://127.0.0.1:8888/api/service/getIpInfo.php?ip=117.89.35.51，访问的 url 中有 api nginx 会自动换到所对应的 location
前端实列代码:
// 新建一个 html 文件把以下代码放入 script 标签中
$.ajax({
// 请求淘宝检测 ip 地址来源的接口
url:’http://127.0.0.1:8888/api/service/getIpInfo.php?ip=117.89.35.51′,
type:’get’,
success:function(res){
console.log(res)
},
error:function(err){
console.log(err)
}
})
启动服务:
我是通过 vsCode 的 Go live 插件启动了一个 127.0.0.1:5500 的服务，有很多同学是通过 node 开启的代理，都一样, 然后我们在浏览器中输入 127.0.0.1:8888 上面 nginx 所配置
打开浏览器 network 数据返回如下，说明跨域访问成功
二. 其它跨域解决方案
1.jsonp 需要目标服务器配合一个 callback 函数。
2.window.name+iframe 需要目标服务器响应 window.name。
3.html5 的 postMessage+ifrme 这个也是需要目标服务器或者说是目标页面写一个 postMessage，主要侧重于前端通讯。
4.node.js 开启本地代理, 类似于 vue-cli 中的 devServer 模式, 阔以方便开启代理
5.CORS 需要服务器设置 header：Access-Control-Allow-Origin。
6.Nginx 反向代理，可以不用目标服务器配合，需要 Nginx 服务器，用于请求转发。
我个人认为 4、5、6 解决跨域问题在实际开发过程中显得更为重要
三.Nginx 工具以及参考资料
Nginx 在线配置生成工具 (需要翻墙) 如何提高 Nginx 的性能 Nginx 常用命令 Nginx 配置简述(小胡子哥)
