1.什么情况下是跨域？
跨域是指a页面想获取b页面资源，如果a、b页面的协议、域名、端口、子域名不同，或是a页面为ip地址，b页面为域名地址，所进行的访问行动都是跨域的。（如下图都是跨域访问）
| Uri | 说明 | 是否跨域 |
|---|---|---|
| http://www.cnblogs.com/a.js | ||
| http://www.a.com/b.js | 不同域名 | 是 |
| http://www.a.com/lab/a.js | ||
| http://www.a.com/script/b.js | 同域名下不同文件 | 否 |
| http://www.a.com:8000/a.js | ||
| http://www.a.com/b.js | 同域名下不同端口 | 是 |
| http://www.a.com/a.js | ||
| https://www.a.com/b.js | 同域名 不同协议 | 是 |
| http://www.a.com/a.js | ||
| http://70.32.92.74/b.js | 域名和域名对应ip | 是 |
| http://www.a.com/a.js | ||
| http://script.a.com/b.js | 主域名相同 子域名不同 | 是（cookie不可访问） |
| http://www.a.com/a.js | ||
| http://a.com/b.js | 同一域名，不同二级域名（同上） | 是 |
2.跨域导致了什么问题？
浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源。也就是如果在a界面访问跨域的b界面，会被浏览器拒绝。但是这种需求是普遍存在的，所以就需要我们解决跨域访问的问题。
3. 为什么采用Nginx的反向代理功能解决跨域
在网上可以看到很多的跨域的解决方案，但是大部分都需要服务器端的配合，我们采用Nginx的反向代理可以不需要通过服务器来解决这个问题。
4. Nginx的反向代理功能解决跨域的实现
4.1 原理：
nginx作为反向代理服务器，就是把http请求转发到另一个或者一些服务器上。通过把本地一个url前缀映射到要跨域访问的web服务器上，就可以实现跨域访问。对于浏览器来说，访问的就是同源服务器上的一个url。而nginx通过检测url前缀，把http请求转发到后面真实的物理服务器。并通过rewrite命令把前缀再去掉。这样真实的服务器就可以正确处理请求，并且并不知道这个请求是来自代理服务器的。
4.2 具体解决方案如下：
在nginx.conf中编辑
然后我把项目部署在nginx的html根目录下，在ajax调用时设置url从http://www.lyz.com/apistest/test变为/apis/apistest/test然后成功解决。
server {
location / {
root html;
index index.html index.htm;
//允许cros跨域访问
add_header 'Access-Control-Allow-Origin' '*';
}
//自定义本地路径
location /apis {
rewrite ^.+apis/?(.*)$ /$1 break;
include uwsgi_params;
proxy_pass http://www.lyz.com;
}
}
比如我之前请求的Ajax如下：
$.ajax({
type:"post",
dataType: "json",
data:{'parameter':JSON.stringify(data)},
url:"http://www.lyz.com/apistest/test",
async: flag,
beforeSend: function (xhr) {
xhr.setRequestHeader("Content-Type", submitType.Content_Type);
xhr.setRequestHeader("user-id", submitType.user_id);
xhr.setRequestHeader("role-type", submitType.role_type);
xhr.setRequestHeader("access-token", getAccessToken().token);
},
success:function(result, status, xhr){
}
,error:function (e) {
layerMsg('请求失败，请稍后再试')
}
});
修改成如下的请求即可：
$.ajax({
type:"post",
dataType: "json",
data:{'parameter':JSON.stringify(data)},
url:"/apis/apistest/test",
async: flag,
beforeSend: function (xhr) {
xhr.setRequestHeader("Content-Type", submitType.Content_Type);
xhr.setRequestHeader("user-id", submitType.user_id);
xhr.setRequestHeader("role-type", submitType.role_type);
xhr.setRequestHeader("access-token", getAccessToken().token);
},
success:function(result, status, xhr){
}
,error:function (e) {
layerMsg('请求失败，请稍后再试')
}
});
https://blog.csdn.net/l1028386804/article/details/79488328
https://blog.csdn.net/qq_31617637/article/details/72955239
http://www.mamicode.com/info-detail-2376828.html
http://seanlook.com/2015/05/17/nginx-location-rewrite/
https://blog.csdn.net/sherry_chan/article/details/79055211
https://www.cnblogs.com/zhuzhenwei918/p/6866094.html
