vue前后端分离项目，解决跨域问题

最近公司新开发项目是前后端分离项目，前端用的是vue框架，在和前端调试接口时存在拒绝跨域访问403的情况。我这里主要将解决的过程记录一下。

什么是跨域

跨域是浏览器的同源策略造成的，只要是域名、端口、协议有一不同，就会被当做是不同的域，之间的请求就被当做跨域操作。

设置同源限制主要是为了安全，如果没有同源限制存在浏览器中的cookie等其他数据可以任意读取，不同域下DOM任意操作，Ajax任意请求的话如果浏览了恶意网站那么就会泄漏这些隐私数据。

解决方案

1.jsonp

需要注意的是这种方式只支持get请求，并不支持post请求。

2.cors

通过使用自定义的HTTP响应头Header允许接口被跨域请求，实现cors的方式有很多。

第一种方式

这种方式主要是利用cors方式进行配置，这种方式主要是在 nginx.conf 配置文件中加入header配置，从而达到支持跨域的目的，话不多说，上代码。

events{
    worker_connections 1024;
    }

http {
    client_max_body_size 1024m;
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;
    #gzip  on;
    server {
        listen       8888; #自身监听8888端口
        server_name first;
        location / {
            charset utf-8;          #显示中文
            add_header 'Access-Control-Allow-Origin' '*'; #允许来自所有的访问地址
            add_header 'Access-Control-Allow-Credentials' 'true';  #设置为true才会发送cookie
            add_header 'Access-Control-Allow-Methods' 'GET, PUT, POST, DELETE, OPTIONS'; #支持请求方式
            add_header 'Access-Control-Allow-Headers' 'Content-Type,*';
			if ($request_method = 'OPTIONS') {
				return 204;
			}
            proxy_pass http://127.0.0.1:8082; #匹配不到其他地址默认匹配的地址是访问 8080端口,本地node start启动的服务
        }
    }
}

这种方式注意的是前端发起一次请求，实际上是分为两次来执行的，第一次是OPTIONS请求来获取服务器支持的HTTP请求方式(get、post等)，以及进行跨域请求时的预检，然后才是获取数据的(get、post等访问)。所以这里将OPTIONS方式访问的请求不转给后端，直接返回204。配置完之后就可以通过nginx进行访问了。

 

第二种方式

这种方式是在项目里进行拦截器配置

首先在web.xml中配置拦截器实现类的具体路径等

 

<!-- CORS过滤器start -->
	<filter>
		<filter-name>corsFilter</filter-name>
		<filter-class>com.liuhui.filter.CorsFilter</filter-class>
	</filter>
	<filter-mapping>
		<filter-name>corsFilter</filter-name>
		<url-pattern>/*</url-pattern>
	</filter-mapping>
	<!-- CORS过滤器end -->

然后在自定义拦截器中实现Filter接口，并重写doFilter方法，如下

@Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
            throws IOException, ServletException {
        HttpServletResponse httpServletResponse = (HttpServletResponse) response;
        httpServletResponse.setHeader("Access-Control-Allow-Origin", "http://localhost:9527");
        httpServletResponse.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        httpServletResponse.setHeader("Access-Control-Max-Age", "3600");
        httpServletResponse.setHeader("Access-Control-Allow-Headers",
                "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");
        httpServletResponse.setHeader("Content-Type","application/json;charset=UTF-8");
        httpServletResponse.setHeader("Access-Control-Allow-Credentials", "true");
        chain.doFilter(request, response);
    }

springboot实现跨域

public class CorsConfig extends WebMvcConfigurerAdapter {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowCredentials(true)
                .allowedMethods("GET", "POST", "DELETE", "PUT")
                .maxAge(3600);
    }

}

这样就配置完成了，几种方式都可以实现。