前后端分离跨域 关于前后端分离开发环境下的跨域访问问题(angular proxy=>nginx )
前后端分离后遇到了跨域访问的问题;
angular1中使用proxy很麻烦,最后还是失败结束;最后总结3种方法如下;
本人使用的第一种方法,只是开发环境下使用很方便!
1:禁掉谷歌的安全策略(Turn off CORS)
For Windows 进入谷歌浏览器的安装目录下(我的目录如下 C:\Users\Administrator\AppData\Local\Google\Chrome\Application\chrome.exe);然后命令行输入
--args --disable-web-security
C:\Users\Administrator\AppData\Local\Google\Chrome\Application\chrome.exe --args --user-data-dir="C://Chrome dev session" --disable-web-security
可以将上述代码写进记事本保存为 .bat后缀名每次点击就可以启动了;
For OSX, open Terminal and run:
$ open -a Google\ Chrome --args --disable-web-security --user-data-dir
For Linux run:
$ google-chrome --disable-web-security
以上方法便可以开启一个关闭掉安全策略的浏览器(谷歌为例);这样就可以进行跨域访问了;
2:使用谷歌插件()
3:使用proxy
请参考http://oskarhane.com/avoid-cors-with-nginx-proxy_pass/;
Avoid CORS with Nginx proxy_pass
I recently had to make cross origin AJAX requests (CORS), which was fine since I had control over the API server and simply adding these headers will make modern browsers ask the API server for permission and then make the request.
Access-Control-Allow-Origin: * Access-Control-Allow-Methods: POST,GET,PUT,DELETE Access-Control-Allow-Headers: Authorization, Lang
But, of course, Internet Explorer want to be a pita and IE 8 & 9 does not support this (a part of it is supported, check out this table). And I have to support IE 9 at least.
So, nginx to the rescue like many times in the past.
I want to configure Nginx to take local requests made to /api/
and forward those to the api located at http://apiserver.com
.
This is what I have in Nginx since the website is up and running (for all browsers except IE 8&9).
server { charset UTF-8; listen 80; root /home/web/myclient; index index.html; server_name myclient.com; location ~ /\. { deny all; } location / { try_files $uri; } }
It basically says: listen to myclient.com on port 80 and deny all requests made to files starting with a dot and serve all other files matching filenames from the dir /home/web/myclient.
Alright, lets change so calls starting with /api/
forwards the call to the API server (not including the /api/
part of the requested path). The trailing slash on the /api/
and proxy_pass http://api_server/;
are important here.
We’re adding an upstream
and a location
block.
upstream api_server { server apiserver.com; } server { charset UTF-8; listen 80; root /home/web/myclient; index index.html; server_name myclient.com; location /api/ { proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-NginX-Proxy true; proxy_pass http://api_server/; proxy_ssl_session_reuse off; proxy_set_header Host $http_host; proxy_redirect off; } location ~ /\. { deny all; } location / { try_files $uri; } }
Now we just restart the server and it should work to make AJAX calls to http://myclient.com/api/users
to get all users.
----------------------------------------------------------
| 转载文章请注明出处! |
----------------------------------------------------------