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

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

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.

 

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

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

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