nginx代理解决跨域,去掉前缀
server {
listen 8081; //监听8081端口
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root /Users/xx/project; //设置根路径
index index.html index.html;
}
location /api { // 匹配url中带有api的,并转发到http://localhost:8080/api
rewrite ^/api/(.*)$ /$1 break; // 利用正则进行匹配#去掉api前缀,$1是正则中的第一
// 串,这样后端的接口也不需要带api了
proxy_pass http://localhost:8080; // 转发的参数设定
}
}
跨域:指 域名、端口、协议等不同。
webpack解决跨域
需要安装webpack 的http-proxy-middleware,在config中的index.js中的dev中找到proxyTable
proxyTable:{ //解决跨域
"/":{
target:"http://192.168.2.114:8081/ptldjweb",
changeOrigin:true,
secure:false,
pathRewrite:{
"^/":""
}
}
},
2、CORS 跨域资源共享解决跨域问题
CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。
需要在服务器配置
1)Access-Control-Allow-Origin: *
该字段是必须的。它的值要么是请求时Origin
字段的值,要么是一个*
,表示接受任意域名的请求。
允许任何域发起的请求都可以获取当前服务器的数据。当然,这样有很大的危险性,恶意站点可能通过XSS攻击我们的服务器。所以我们应该尽量有针对性的对限制安全的来源,例如下面的设置使得只有www.haorooms.com这个域才能跨域访问服务器的API
2)Access-Control-Allow-Credentials
该字段可选。它的值是一个布尔值,表示是否允许发送Cookie。默认情况下,Cookie不包括在CORS请求之中。设为true
,即表示服务器明确许可,Cookie可以包含在请求中,一起发给服务器。这个值也只能设为true
,如果服务器不要浏览器发送Cookie,删除该字段即可。
3、JSONP
JSONP只支持GET
请求,JSONP的优势在于支持老式浏览器,以及可以向不支持CORS的网站请求数据。需要前后端配合使用。一般后端设置callback ,前端给后台接口中传一个callback 就可以。
$.ajax({
type : "get",
url : "跨域地址",
dataType : "jsonp",//数据类型为jsonp
jsonp: "callback",//服务端用于接收callback调用的function名的参数【后台接受什么参数,我们就传什么参数】我们上面设置是callback
success : function(data){
//结果处理
},
error:function(data){
console.log(data);
}
});
4、修改document.domain来跨子域
跨域的两个页面中设置document.domain就可以了。修改document.domain的方法只适用于不同子域的框架间的交互。
例如:1.在页面 http:// www.haorooms.com/a.html 中设置document.domain
<iframe id = "iframe" src="http://haorooms.com/b.html" onload = "test()"></iframe>
<script type="text/javascript">
document.domain = 'haorooms.com';//设置成主域
function test(){
alert(document.getElementById('iframe').contentWindow);//contentWindow 可取得子窗口的 window 对象
}
</script>
5、window.name来进行跨域
window对象有个name属性,该属性有个特征:即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的,每个页面对window.name都有读写的权限,window.name是持久存在一个窗口载入过的所有页面中的。
<script type="text/javascript">
var state = 0,
iframe = document.createElement('iframe'),
loadfn = function() {
if (state === 1) {
var data = iframe.contentWindow.name; // 读取数据
alert(data); //弹出'I was there!'
} else if (state === 0) {
state = 1;
iframe.contentWindow.location = "http://a.com/proxy.html"; // 设置的代理文件
}
};
iframe.src = 'http://b.com/data.html';
if (iframe.attachEvent) {
iframe.attachEvent('onload', loadfn);
} else {
iframe.onload = loadfn;
}
document.body.appendChild(iframe);
</script>
6、window.postMessage方法跨域
window.postMessage虽然说是html5的功能,但是支持IE8+,假如你的网站不需要支持IE6和IE7,那么可以使用window.postMessage。关于window.postMessage,很多朋友说他可以支持跨域,不错,window.postMessage是客户端和客户端直接的数据传递,既可以跨域传递,也可以同域传递。
一个页面,页面中拿到部分用户信息,点击进入另外一个页面,另外的页面默认是取不到用户信息的,你可以通过window.postMessage把部分用户信息传到这个页面中。
发送数据:
window.postMessage('发送的数据');
//监听消息反馈
window.addEventListener('message',function(event) {
if(event.origin !== 'http://haorooms.com') return; //这个判断一下是不是我这个域名跳转过来的
console.log('received response: ',event.data);
},false);