xx996
0%

跨域解决方案

跨域

什么是跨域

协议 + 域名 + 端口 有一处不相同时，就认为是跨域

为什么会有跨域

同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到攻击。

解决方案

使用Nginx做反向代理

  • 情景1

    假设网站部署在80接口，在80接口下设置反向代理，可直接解决跨域问题

1
2
3
4
5
location ^~/v1{
    rewrite ^/v1/(.*)$ /$1 break;
    proxy_pass  http://localhost:8080;
}

  • 情景2

    假设网站部署在8081端口，api端口为8080，反向代理服务端口为80

1
2
3
4
5
6
7
8
9
10
11
12
13
location ^~/v1{
      rewrite ^/v1/(.*)$ /$1 break;
      proxy_pass  http://localhost:8080;
      add_header Access-Control-Allow-Methods *;
      add_header Access-Control-Max-Age 3600;
      add_header Access-Control-Allow-Credentials true;
      add_header Access-Control-Allow-Origin $http_origin;
      add_header Access-Control-Allow-Headers 
      $http_access_control_request_headers;
      if ($request_method = OPTIONS){
          return 200;
      }       
}