Nginx前后端分离设置跨域，WebSocket设置ws可域名访问

一:前后端跨域

现在开发项目，所流行的就是前后端分离，端口不一致，或者域名访问不一致，会导致访问不到，需要做跨域处理。

>nginx做跨域配置如下

 server {
        listen       80;
        server_name  域名;  //域名配置

    #return      301 https://$server_name$request_uri;
   location / {
       #proxy_redirect off;
       proxy_set_header Host $host;
       proxy_set_header X-Real-IP $remote_addr;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       proxy_pass ip:端口/;    //ip端口
     }
   location /services {
    deny all;
   } 
   
   #跨域配置
   add_header Access-Control-Allow-Origin *;    
   add_header Access-Control-Allow-Headers X-Requested-With;
   add_header Access-Control-Allow-Methods GET,POST,OPTIONS;

 只需要加入跨域配置就可以了，或者二选一，在代码内部做跨域处理（只能二选一，代码做跨域，nginx再做跨域，会导致时效）。代码如下：

@Component
public class AccessFilter implements Filter {

    @Override
    public void init(FilterConfig filterConfig) {
    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) servletResponse;
        HttpServletRequest request = (HttpServletRequest) servletRequest;
        response.setContentType("application/json; charset=utf-8");
        response.setCharacterEncoding("UTF-8");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET,PUT, OPTIONS, DELETE");
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, token");
        filterChain.doFilter(servletRequest, servletResponse);
    }

    @Override
    public void destroy() {
    }
}

二：WebSocket设置ws可访问

在服务器部署的项目，有WebSocket,域名访问会导致失效，访问不到，所以要在nginx加入以下配置方可：

location下加入：
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;

server外部加入：
map $http_upgrade $connection_upgrade {
      default upgrade;
      '' close;
}

WebSocket域名访问即可成功