跨域的安全限制都是对浏览器端来说的,服务器端是不存在跨域安全限制的。
浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互。
如果协议,端口和主机对于两个页面是相同的,则两个页面具有相同的源,否则就是不同源的。
如果要在js里发起跨域请求,则要进行一些特殊处理了。或者,你可以把请求发到自己的服务端,再通过后台代码发起请求,再将数据返回前端。
1、Script标签或Jsonp:支持get,不支持post
参考:https://www.cnblogs.com/chiangchou/p/jsonp.html
2、Post:服务器端设置header('Access-Control-Allow-Origin:*');
CORS(跨域资源共享,Cross-Origin Resource Sharing),预检问题
Access-Control-Allow-Origin: *';
'Access-Control-Allow-Methods: *';
'Access-Control-Allow-Headers: *';
'Access-Control-Expose-Headers: *';
'Access-Control-Allow-Credentials: true'
3、表单方式
基本原理大概是这样的:form表单提交,无论你是post,还是get,无论你提交到哪,只要后端有对应程序处理,都妥妥的,不存在跨域一说;以前无刷新上传、提交表单都是将form的target指向一个空iframe,此处同理;类似:a.com提交表单到b.com,表单的target为一个空iframe;b.com处理请求,在response里执行callback,注意,此处callback是属于那个空iframe的;
<!-- a.html -->
<!-- test post access domain -->
<!-- use form and hide iframe -->
<form action="b.com" method="post" target="hidefrm">
<input type="text" value="test post data access domain">
<input type="submit" value="submit">
</form>
<iframe src="" name="hidefrm" frameborder="0"></iframe>
后端的处理基本一样;如果不出意料,到此,请求会在控制台出现一片红,是的,要你设置domain;除了页面和对应js要设置domain外,一定别忘啦,response里的callback其实是属于当前页面的,所以response里执行的callback也要设置domain;类似这样:
res.send('document.domain="a.com";window.parent.aa('+str+'));
4、apache或nginx代理
我们这样编写nginx的配置文件:
server{
listen8000;
location/ {
includeuwsgi_params;
uwsgi_passunix:/tmp/testFlask2.sock;
}
location/partners {
rewrite^.+partners/?(.*)$ /$1 break;
includeuwsgi_params;
uwsgi_passunix:/tmp/testFlask1.sock;
}}
我们把testFlask2项目部署在8080端口的根目录下。把提供web服务的testFlask1项目部署在/partners目录下。
但我们的testFlask1项目并不能处理/partners/json这样的url请求。那怎么办呢?
通过 rewrite^.+partners/?(.*)$ /$1 break; 这一条命令,nginx可以把收到的/partners/*请求全部转为/*请求后再转发给背后的真实web服务器。
http://blog.jobbole.com/101318/
https://blog.csdn.net/CareChere/article/details/52281246
nginx配置location总结及rewrite规则写法:http://seanlook.com/2015/05/17/nginx-location-rewrite/
首先假设你请求数据的网站为B。要看你是否可以控制(修改里面的代码)。
1 jsonp 缺点 只能get请求 ,需要修改B网站的代码
2 cors 刘子龙说的方案,这个方案缺点 是 ie6 7 兼容不好(倒是不见得要兼容)。需要B网站在响应中加头
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS?redirectlocale=en-US&redirectslug=HTTP_access_control#Access-Control-Expose-Headers
3 postMessage 缺点也是 ie6 7 兼容不好(倒是不见得要兼容)。需要修改B网站的代码
4 iframe window.name 传值得方式很巧妙,兼容性也很好。但是也是需要你能修改B网站代码
5 服务端主动请求B网站,兼容性好而且你客户端的代码还是原来的ajax,缺点是感觉不好。。
6 类似5 用nginx把B网站的数据url反向代理。