”尽管囿于现实漩涡,心中却仍是此间少年”。 ​​​​

人生已多风雨...
人生已多风雨...

应用场景

比如说后台是java做的,网页是vue写的,想要前后端分离,偏偏后端接口不开放跨域,好了,坑来了.

JSONP

我不太推荐,jquery虽然给你引用好了,但是JSONP它只支持GET请求而不支持POST等其它类型的HTTP请求;它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题。所以说pass;

CORS

也是一种让网页可以跨越请求的方法,需要服务器设置header :Access-Control-Allow-Origin。可惜,后台小哥不搭理你也白搭.求人不如求己

nginx

当然还有其他方法,我觉得挺麻烦,放弃,直接选用nginxproxy反向代理,拿去不谢.

nginx配置proxy

  1. 直接去上面的链接跳转到官网,可以下载压缩包的格式,解压直接可以用了,所以别怕安装.下载好解压了大概这样,我的nginx版本号是window 1.11.1,我用1.2.0的测了下基本上ok,应该是通用的.

    目录结构
    目录结构

  2. 进入解压的文件夹,找到conf文件夹里nginx.conf文件,直接用编辑器打开nginx.conf这个文件,找到serve这行

加入一段代码

1
2
3
4
5
6
7
location /web {
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://xxx.xxx.cn:80/web;
}

其实也可以有各种正则的写法,基本上你的需求都能满足

1
2
3
4
5
6
7
8
location ^~ /webs/ {
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://xxx.xxx.cn:80/web/;
}

这里的意思是在80端口下监听/web这个请求, proxy_set_header就是可设置请求头-并将头信息传递到服务器端。看不懂也没关系,照着写就通了就知道了
只需要关注proxy_pass这个设置
就好了,这儿填的你要反向代理的域名,这么写的意思是当80端口的页面请求发起/web这个请求的时候会自动拦截,并代理到http://xxx.xxx.cn:80/web下面,等于说就没有了跨域问题.我们就可以直接ajax请求了.

1
2
3
4
5
6
7
8
9
$.ajax({
url: "/web/xxx",
data:{Full:"fu"},
type: "POST",
dataType:'json',
success:CallBack,
error:function(er){
BackErr(er);}
});

然后实际请求的是http://xxx.xxx.cn:80/web/xxx这个路径,跨域是不是就解决了,是不是很easy.

附赠windows下nginx命令

1
2
3
4
5
start nginx //启动nginx服务
nginx -s stop //强制关闭nginx
nginx -s quit //整有序的停止nginx,并保存相关信息。
nginx -s reload //改变配置后重载nginx配置并启动

最怕深情得不到珍重 长情会被辜负