解决跨域

vue解决跨域 - 开发环境

vue.config.js中devServer节点中增加属性

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:8080',
        // secure: false,  // 如果是https接口，需要配置这个参数
        changeOrigin: true, // 如果接口跨域，需要进行这个参数配置，为true的话，请求的header将会设置为匹配目标服务器的规则（Access-Control-Allow-Origin）
        pathRewrite: {
          '^/api': '' //本身的接口地址没有 '/api' 这种通用前缀，所以要rewrite，如果本身有则去掉
        }
      }
    }
  }
}

nginx开发环境解决跨域 - 反向代理方式

浏览器的url不能写http://127.0.0.1:3000/要写成http://127.0.0.1

# 浏览器的url不能写http://127.0.0.1:3000/要写成http://127.0.0.1
    server {
        listen       80;
        server_name  127.0.0.1;

        location / {
            proxy_pass  http://127.0.0.1:3000/;
        }

        # 比如：
        # 访问 		http://127.0.0.1:3000/api/queryUserList
        # 反向代理到 http://127.0.0.1:8080/queryUserList
        location ^~ /api/ { # 拦截所有api开头的请求   ^~开头表示uri以某个常规字符串开头
            proxy_pass  http://127.0.0.1:8080/;
        }
    }

分析：
这里监听80端口，并配置两个反向代理

1 前后端分离调接口跨域的原因，前端有自己的ip和端口号，后端也有自己的ip端口号。
2 为了避免跨域，前端调接口用的ip和端口号，写自己的
3 通过nginx反向代理，把调接口的请求，转发到后端真实的地址。并以api开头，来区分是否是调接口的请求
4 此时，nginx反向代理，需要监听一个ip和端口，这个又要和前端自己的ip端口号一致。【通过监听80端口，将请求转发到前端对应的端口上，就可以实现】

SpringBoot解决跨域

package com.zq.crm;

import org.springframework.stereotype.Component;

import javax.servlet.*;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@Component

public class SimpleCORSFilter implements Filter {

    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {

        HttpServletResponse response = (HttpServletResponse) res;

        response.setHeader("Access-Control-Allow-Origin", "*");

        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, HEAD");

        response.setHeader("Access-Control-Max-Age", "3600");

        response.setHeader("Access-Control-Allow-Headers", "access-control-allow-origin, authority, content-type, version-info, X-Requested-With");



        chain.doFilter(req, res);

    }

    public void init(FilterConfig filterConfig) {}

    public void destroy() {}

}