前后台分离项目的跨域问题

一般的web项目都是前台页面和后台类放在一个项目文件里，前后台交互不存在跨域问题。

但是对于前后台分离的项目，由于浏览器的同源安全策略，再用平时的方法是请求不到的，这时就要采取一些特殊手段。CORS是一个W3C标准，全称是”跨域资源共享”（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制

 

同源安全策略：浏览器只允许请求当前域的资源，而对其他域的资源表示不信任（只要不是一个端口就不是当前域）

 

方法一：

1、ajax设置支持跨域

    		//使ajax支持跨域
		$.support.cors = true;
		$.ajax({  
			url: 'http://100.24.254.106:8762/cskx/hello1',
			data: {"parameter1":"卡卡"},
			dataType: "text",
			type:"POST",
			success: function (response) {			
				console.log(response);			
			},
			error:function(response){
				console.log(response);
			},
		});	

2、后台类添加响应头

	@ResponseBody
	@RequestMapping("/hello1")
	public String test(HttpServletRequest request, HttpServletResponse response) {
		
		String parameter2 = request.getParameter("parameter1");
		System.out.println(parameter2);
		
		//跨域的响应头
		response.setHeader("Access-Control-Allow-Origin", "*");
		response.setHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
		response.setHeader("Access-Control-Allow-Headers", "*");
		  
		return "我是服务提供者1号";  

	}

方法二：

针对springboot项目，添加CorsConfig配置：

/*
 * 跨域支持
 */
@Configuration
public class CorsConfig implements WebMvcConfigurer {

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

}

方法三：

通过nginx实现跨域

1、修改nginx的配置文件nginx.conf

server {
        listen       8800;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            index  index.html index.htm;
        }
        
        #支持跨域
        location /cskx {
            add_header 'Access-Control-Allow-Origin' $http_origin;
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' '*';
            proxy_pass http://100.24.254.106:8762/cskx;
        }

}

配置nginx监听8800端口，ajax请求的时候直接请求nginx服务器的8800端口，就会自动转到配置的服务上。

		$.ajax({  
			url: 'http://100.4.254.106:8800/cskx/hello1',
			data: {"parameter1":"卡卡"},
			dataType: "text",
			type:"POST",
			success: function (response) {			
				console.log(response);			
			},
			error:function(response){
				console.log(response);
			},
		});