在之前项目中,web前端ajax的跨域访问api接口都是通过设置Data-type="jsonp"来解决的。
新项目中为了安全起见,把用户敏感信息和api接口验证都放在HttpRequest Header的Authorization中,
但是发现一个蛋疼的问题,使用Data-type="jsonp"来进行跨域访问,Header中Authorization的内容无法发送出去。
为了解决这个问题只能使用Data-type="json",并在本地用nginx搭建一个反向代理来解决跨域访问问题。
1.修改本地的host地址,定义一个"api.com"的域名指向127.0.0.1如下:
127.0.0.1 api.com
2.使用api.com来访问api接口,api.com/web/来访问本地网页端。nginx方向代理设置如下:
location /web {
#指向本地web访问目录
proxy_pass http://127.0.0.1:8080$request_uri;
}
location / {
#指向远程api访问url
proxy_pass http://192.168.1.211:8080$request_uri;
}
这样解决了跨域访问问题,在项目后续开发中,还是发现一个问题。服务器端向response中写入的cookie,本地无法保存,以至于服务器在验证权限的时候,无法获得相应的cookie。
研究发现在跨域访问时,服务器写入的cooki其实写入到211路径或者域下面,而本地调试api时使用的是api.com这个域。解决这个问题也很简单,在设置代理服务器时指定cooki的domain,如下:
location / {
proxy_pass_header Set-Cookie;
proxy_set_header Cookie $http_cookie;
#远程服务器下的cookie写入到api.com下面
proxy_cookie_domain 192.168.1.211 api.com;
#指向远程api访问url
proxy_pass http://192.168.1.211:8080$request_uri;
}
这样圆满解决问题,在此MARK一下。