跟多介紹可參考：
跨域的五種解決方案筆記和相關(guān)資料下載

1. 什么是跨域

瀏覽器不允許執(zhí)行其他網(wǎng)站的腳步（ajax），瀏覽器的同源策略造成的；
例如：發(fā)起ajax請(qǐng)求時(shí)如果IP、端口、協(xié)議任一不同，則都屬于跨域。

例如以下案例中，A網(wǎng)站需要請(qǐng)求B網(wǎng)站接口：

2. 演示跨域問(wèn)題

步驟：
首先在右上角下載本章節(jié)相關(guān)資料；

1. 將demo.html 放入Nginx的html目錄中_（默認(rèn)已經(jīng)放進(jìn)去了）_，雙擊nginx.exe啟動(dòng)Nginx， –啟動(dòng)Nginx
2. 運(yùn)行jar包 java -jar kexuekt01.jar， 或通過(guò)idea打開(kāi)kexuekt01項(xiàng)目， – 啟動(dòng)項(xiàng)目
3. 瀏覽器訪問(wèn)：http://127.0.0.1/demo.html – 看效果
   F12打開(kāi)瀏覽器控制臺(tái)查看跨域error錯(cuò)誤信息`：
   

重要知識(shí)點(diǎn)：存在跨域時(shí)Java接口是可以正常進(jìn)行業(yè)務(wù)處理的，只是瀏覽器不能接收后臺(tái)返回的數(shù)據(jù)，并在圖 1瀏覽器控制臺(tái)輸出的跨域錯(cuò)誤。

3. 解決跨域的五種方法

1. jsonp
2. 內(nèi)部HttpClient遠(yuǎn)程調(diào)用
3. nginx反向代理
4. 設(shè)置響應(yīng)頭允許跨域 response.setHeader(“Access-Control-Allow-Origin”, “*”);
5. SpringBoot注解@CrossOrigin

3.1 Jsonp解決跨域演示

前端代碼

 $.ajax({
     type:"get",
             dataType:"jsonp",
             jsonp:"callback",//請(qǐng)求中重寫(xiě)回調(diào)函數(shù)的名字
             url:"http://127.0.0.1:8080/kexue/user",
             success:function (data) {
         alert(data.response);
     }
 }, 'json');

后臺(tái)代碼

1. 后臺(tái)需要接收的jsonp:"callback"中的"callback"參數(shù)，
2. 返回參數(shù)格式必須為：callback({object});

@RequestMapping("/kexue/user")
public String demo(String callback) {
			JSONObject obj = JSONUtil.createObj();
			obj.put("code", 200);
			obj.put("response", "調(diào)用成功");
			// 返回格式：callback({object});
			return callback + "(" + obj + ")";
}

說(shuō)明

Jsonp的使用方式較為麻煩，解決跨域一般不會(huì)使用該方法。

3.2 內(nèi)部HttpClient遠(yuǎn)程調(diào)用

啟動(dòng)兩個(gè)后臺(tái)

端口1：8080（自己公司的項(xiàng)目解決了跨域問(wèn)題）
端口2：8081（模擬第三方項(xiàng)目接口，沒(méi)有解決跨域問(wèn)題）

8080端口項(xiàng)目

@CrossOrigin // 跨域注解
@RestController
public class Demo1 {

		@RequestMapping("/kexue/user")
		public JSONObject demo() {
			String body = HttpRequest.get("127.0.0.1:8081/kexue/user2").execute().body();
			JSONObject obj = JSONUtil.parseObj(body);
			return obj;
		}
}

8081端口項(xiàng)目（第三方接口）

@RequestMapping("/kexue/user2")
public JSONObject demo() {
			JSONObject obj = JSONUtil.createObj();
			obj.put("code", 200);
			obj.put("response", "第三方接口");
			return obj;
}

注：修改端口號(hào)，便于測(cè)試 -Dserver.port=8081

說(shuō)明

HttpClient這種方式適合調(diào)用第三方接口。
例如：調(diào)用第三方接口時(shí)，如果前端直接調(diào)用第三方接口會(huì)報(bào)跨域問(wèn)題（第三方接口沒(méi)有解決跨域問(wèn)題），那么就只能通過(guò)后臺(tái)HttpClient的方式進(jìn)行調(diào)用。

3.3 Nginx反向代理

前端代碼

$.ajax({
      type:"get", 
      url:"http://127.0.0.1:80/kexue/user", 
      success:function (data) {
          //請(qǐng)求成功后的處理
			alert(data.response);
      }
}, 'json');

后端代碼

@RequestMapping("/kexue/user")
public JSONObject demo() {
    JSONObject obj = JSONUtil.createObj();
    obj.put("code", 200);
    obj.put("response", "調(diào)用成功");
    // 返回格式：callback({object});
    return obj;
}

nginx.conf

worker_processes  1;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       80;
        server_name  localhost;

        location / {
            root   html;
            index  index.html index.htm;
        }
		
		#攔截所有以/kexue開(kāi)頭的請(qǐng)求
		location /kexue {
			index  proxy_set_header Host $host;
			index  proxy_set_header X-Real-IP $remote_addr;
			index proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			proxy_pass http://127.0.0.1:8080; #后端服務(wù)地址
        }
    }
}

說(shuō)明

使用Nginx方向代理的前提是，前端代碼（vue）需要和Nginx服務(wù)在一臺(tái)物理機(jī)上；如果滿足以上條件，就優(yōu)先考慮通過(guò)Nginx反向代理來(lái)解決跨域問(wèn)題。

3.4 設(shè)置響應(yīng)頭允許跨域

前端代碼

$.ajax({
      type:"get", 
      url:"http://127.0.0.1:8080/kexue/user", 
      success:function (data) {
          //請(qǐng)求成功后的處理
			alert(data.response);
      }
}, 'json');	

后端代碼

@RequestMapping("/kexue/user")
public JSONObject demo(HttpServletResponse response) {
    JSONObject obj = JSONUtil.createObj();
    obj.put("code", 200);
    obj.put("response", "調(diào)用成功");
    // *允許所有網(wǎng)站跨域
    response.setHeader("Access-Control-Allow-Origin", "*");
    return obj;
}

說(shuō)明

通常都是在攔截器中來(lái)配置“設(shè)置響應(yīng)頭允許跨域”。

3.5 @CrossOrigin注解

前端代碼

$.ajax({
      type:"get", 
      url:"http://127.0.0.1:8080/kexue/user", 
      success:function (data) {
          //請(qǐng)求成功后的處理
			alert(data.response);
      }
}, 'json');	

后端代碼

@CrossOrigin // 跨域注解
@RestController
public class Demo1 {

    @RequestMapping("/kexue/user")
    public JSONObject demo() {
        JSONObject obj = JSONUtil.createObj();
        obj.put("code", 200);
        obj.put("response", "調(diào)用成功");
        return obj;
    }
}

說(shuō)明

@CrossOrigin注解底層通過(guò)Spring的攔截器功能往response里添加 Access-Control-Allow-Origin等響應(yīng)頭信息。
response.setHeader(“Access-Control-Allow-Origin”, “*”);