关于跨区的3种解决办法

最新推荐文章于 2024-03-01 15:48:48 发布

chihuang6429

最新推荐文章于 2024-03-01 15:48:48 发布

阅读量483

点赞数

文章标签：前端 javascript json ViewUI

原文链接：https://my.oschina.net/u/3537619/blog/1580399

版权

1.jsop解决跨域

jsonp就是利用<script>标签没有跨域限制的“漏洞”（历史遗迹啊）来达到与第三方通讯的目的。当需要通讯时，本站脚本创建一个<script>元素，地址指向第三方的API网址；

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="resource/js/jquery-1.7.2.js"></script>
</head>
<script type="text/javascript">
$(function(){
/*
//简写形式，效果相同
$.getJSON("http://app.example.com/base/json.do?sid=1494&busiId=101&jsonpCallback=?",
function(data){
$("#showcontent").text("Result:"+data.result)
});
*/
$.ajax({
type : "get",
async:false,
url : "http://app.example.com/base/json.do?sid=1494&busiId=101",
dataType : "jsonp",//数据类型为jsonp
jsonp: "jsonpCallback",//服务端用于接收callback调用的function名的参数
success : function(data){
$("#showcontent").text("Result:"+data.result)
},
error:function(){
alert('fail');
}
});
});
</script>
<body>
<div id="showcontent">Result:</div>
</body>
</html>

通过url拼接回调，只能发送get请求，在进行账户密码等重要发送时会显示明文。

2.后台设置所有域名都可以访问

现在很多通过session包保存账户密码然后返回给前端的是的一个带set-cookie的字符串，这个字符串会自动保存到本地浏览器的cookie中，在下次发送请求的时候，会带上这个cookie，假如你后台返回的set-cookie中的那段字符串无法保存到本地的cookie，那么下次请求就不会带上那段字符串（相当于一个通行证），那么再次去请求数据就会报错。

在W3C标准中是无法操作直接操作跨区响应回来的set-cookie

缺点;在后台进行seesion 保存时，在进行登录校验后返回的无法自动保存cookie，在其他页面发送数据的时候就会获取不到cookie，从而不能发送到后台，这种情况下就会请求不到数据

3.运用反向代理

这个应该是最常用最理想的解决跨域的方式，我这边是直接在自己电脑下配置的nginx，监听本地的URL，这里有个坑就是，关于前端webstock的报错，这里注意下就好了；

配置如下：

worker_processes 1;

events {
worker_connections 1024;
multi_accept on;
}

http {
include mime.types;
default_type application/octet-stream;

sendfile on;

keepalive_timeout 65;
server {
listen 80;
server_name 192.168.0.64; 自己的url
location / {

proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-NginX-Proxy true;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_connect_timeout 3;
proxy_send_timeout 30;
proxy_read_timeout 60;
proxy_pass http://192.168.0.64:8080; 自己的url

}
location /znmk-mobile-service {
proxy_pass http://192.168.0.203:8080; 数据url
client_max_body_size 100m;
client_body_buffer_size 2048k;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-NginX-Proxy true;
proxy_set_header Connection "";
proxy_http_version 1.1;
proxy_connect_timeout 3;
proxy_send_timeout 30;
proxy_read_timeout 60;
}
}
}