解决跨域

web 领域开发中，经常采用前后端分离模式。这种模式下，前端和后端分别是独立的 web 应用程序，例如：后端是 Java 程序，前端是 React 或 Vue 应用。

各自独立的 web app 在互相访问时，势必存在跨域问题。解决跨域问题一般有两种思路：

  1. CORS

在后端服务器设置 HTTP 响应头，把你需要允许访问的域名加入 Access-Control-Allow-Origin 中。

  1. jsonp

把后端根据请求，构造 json 数据，并返回，前端用 jsonp 跨域。

这两种思路，本文不展开讨论。

需要说明的是，nginx 根据第一种思路，也提供了一种解决跨域的解决方案。

举例：www.helloworld.com 网站是由一个前端 app ，一个后端 app 组成的。前端端口号为 9000， 后端端口号为 8080。

前端和后端如果使用 http 进行交互时，请求会被拒绝，因为存在跨域问题。来看看，nginx 是怎么解决的吧：

首先，在 enable-cors.conf 文件中设置 cors ：

  1. # allow origin list
  2. set $ACAO '*';
  4. # set single origin
  5. if ($http_origin ~* (www.helloworld.com)$) {
  6.   set $ACAO $http_origin;
  7. }
  9. if ($cors = "trueget") {
  10.     add_header 'Access-Control-Allow-Origin' "$http_origin";
  11.     add_header 'Access-Control-Allow-Credentials' 'true';
  12.     add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
  13.     add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
  14. }
  16. if ($request_method = 'OPTIONS') {
  17.   set $cors "${cors}options";
  18. }
  20. if ($request_method = 'GET') {
  21.   set $cors "${cors}get";
  22. }
  24. if ($request_method = 'POST') {
  25.   set $cors "${cors}post";
  26. }

接下来，在你的服务器中 include enable-cors.conf 来引入跨域配置：

  1. # ----------------------------------------------------
  2. # 此文件为项目 nginx 配置片段
  3. # 可以直接在 nginx config 中 include（推荐）
  4. # 或者 copy 到现有 nginx 中，自行配置
  5. # www.helloworld.com 域名需配合 dns hosts 进行配置
  6. # 其中，api 开启了 cors，需配合本目录下另一份配置文件
  7. # ----------------------------------------------------
  8. upstream front_server{
  9.   server www.helloworld.com:9000;
  10. }
  11. upstream api_server{
  12.   server www.helloworld.com:8080;
  13. }
  15. server {
  16.   listen       80;
  17.   server_name  www.helloworld.com;
  19.   location ~ ^/api/ {
  20.     include enable-cors.conf;
  21.     proxy_pass http://api_server;
  22.     rewrite "^/api/(.*)$" /$1 break;
  23.   }
  25.   location ~ ^/ {
  26.     proxy_pass http://front_server;
  27.   }
  28. }

到此，就完成了。