前後臺分離項目的跨域問題

一般的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號";  

	}

 

方法二：

通過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);
			},
		});