前后端分离跨域 关于前后端分离开发环境下的跨域访问问题(angular proxy=>nginx )

时间:2022-08-28 12:02:53

前后端分离后遇到了跨域访问的问题;

angular1中使用proxy很麻烦,最后还是失败结束;最后总结3种方法如下;

本人使用的第一种方法,只是开发环境下使用很方便!

1:禁掉谷歌的安全策略(Turn off CORS)

For Windows 进入谷歌浏览器的安装目录下(我的目录如下 C:\Users\Administrator\AppData\Local\Google\Chrome\Application\chrome.exe);然后命令行输入

 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.

 

----------------------------------------------------------

|                 转载文章请注明出处!               |

----------------------------------------------------------