解决跨域的N种方法

同花顺

经常遇到跨域问题。

A项目访问B项目，B项目不让访问。

对B项目增加跨域配置，让A可以成功访问B项目。

跨域报错

同样是跨域问题，但是报错信息并不一样。

解决的原理是一样的。

跨域机制

cors是保护当前服务端的机制，不能随便一个东西都可以访问我的资源。

解决原理：

在当前服务端设置允许的origin，别人来访问你时，如果有对应的origin就可以访问。

简单的跨域请求，用下边的配置类加进去就行了，针对预检请求要加一层判断。

复杂预检请求：

预检请求不支持重定向。

预检请求处理：

1、可以允许option访问。

2、碰到后直接返回200。

写一个自定义的过滤器，然后将该过滤器注入到web.xml中。
在这个过滤器中，排除预检请求，遇到预检请求直接返回200状态码。

我裂开了

最简单粗暴炸裂的解决跨域问题的方法就是对浏览器进行设置。

这种方法仅用于：

开发过程中，不想被跨域耽误时间，先将重点业务完成，后续再解决跨域。

操作步骤：

1、C盘新建文件夹MyChromeUserData。

2、拷贝一个谷歌浏览器的快捷方式，放进去。

3、右键属性，尾部增加内容。
–user-data-dir=“C:\MyChromeUserData” --test-type --disable-web-security

web项目解决跨域

加入jar包，配置web.xml就好了。

常见的CORS包

java-property-utils-1.9.1.jar

cors-filter-1.9.2.jar

常用的CORS配置信息

<filter>
		<filter-name>CORS</filter-name>
		<filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
		<init-param>
			<param-name>cors.allowOrigin</param-name>
			<param-value>http://localhost:8020</param-value>
		</init-param>
		<init-param>
			<param-name>cors.supportedMethods</param-name>
			<param-value>GET, POST, HEAD, OPTIONS</param-value>
		</init-param>
		<init-param>
			<param-name>cors.supportedHeaders</param-name>
			<param-value>*</param-value>
		</init-param>
		<init-param>
			<param-name>cors.supportsCredentials</param-name>
			<param-value>true</param-value>
		</init-param>
        <init-param>
            <param-name>cors.maxAge</param-name>
            <param-value>3600</param-value>
        </init-param>
	</filter>
	<filter-mapping>
		<filter-name>CORS</filter-name>
		<url-pattern>/*</url-pattern>*/
	</filter-mapping>

springboot项目

加入配置类就好了。

常见的CORS配置类

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class CorsConfig {


    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("http://localhost:8080");
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        corsConfiguration.setAllowCredentials(true);
        return corsConfiguration;
    }


    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig());
        return new CorsFilter(source);
    }

}

Nginx解决跨域

在8020项目随便一个页面，增加一个方法，用于访问8040的资源。

点击时，发现不允许访问。产生了跨域问题。

打开nginx服务，简单配置一下，就可以了。

报错信息：

前端JS为：

    function onAbc(e) {
        $.ajax({
            url: "http://localhost:8040/apis",
            type: "post",
            success: function (result) {
            
            }
        });
    }

Nginx配置修改为：

upstream xiao-laoben{
	server	127.0.0.1:8030;
}

server {
	listen       8040;
	server_name  127.0.0.1;
	add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Headers X-Requested-With;
    add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
	
	location /apis {
	    proxy_pass   http://xiao-laoben/;
	}
	
}

解决：