在開發(fā)前后端完全分離的系統(tǒng)中，服務端代碼屬于一個工程，前端代碼屬于另一個工程悉抵，前端開發(fā)人員在進行接口對接時，會產(chǎn)生跨域訪問的問題摘完。究其原因歸根是瀏覽器中的JS同源策略姥饰。
本文大概流程：
- JS同源策略
- nginx解決跨域
- Springboot 解決跨域
- 瀏覽器插件解決跨域
前端ajax的jsoup啥的就不在這說了，各個框架都有自己的一套解決方案孝治，百度一下即可列粪。
JS同源策略：
即同協(xié)議栅螟，同域名，同端口篱竭。
- 同協(xié)議：http和https就是不同協(xié)議
- 同域名：略
- 同端口：略
如果三者有一個不同力图，則就會產(chǎn)生跨域訪問。
1. nginx解決
location / {
add_header Access-Control-Allow-Origin '*';
proxy_pass http://127.0.0.1:8080;
}
或者在server里添加add_header Access-Control-Allow-Origin '*';
加這個是干嘛用的呢掺逼？是把nginx攔截到的請求里加請求頭Access-Control-Allow-Origin '*';表示接受跨域請求吃媒，然后再進行請求轉(zhuǎn)發(fā)。
一般這樣下來就可以實現(xiàn)跨域了吕喘，如果還沒有解決你的問題赘那，請直接看第三點。
如果你沒有用到nginx氯质，那么請看下面募舟。
2. SpringBoot項目中解決
/**
* Created by Fant.J.
*/
@Component
public class CORSConfiguration extends WebMvcConfigurerAdapter {
@Override
public void addCorsMappings(CorsRegistry registry){
registry
//配置可以被跨域的路徑
.addMapping("/**")
//允許所有的請求方法訪問該跨域資源服務器如：POST、GET闻察、PUT拱礁、DELETE等。
.allowedMethods("*")
//允許所有的請求域名訪問我們的跨域資源
.allowedOrigins("*")
//允許所有的請求header訪問 可以自定義設置任意請求頭信息辕漂，如："X-YAUTH-TOKEN"
.allowedHeaders("*");
}
}
都有注釋就不多嗶嗶了呢灶。。
3. 瀏覽器插件解決
如果前兩者還不可以钉嘹，那么就需要放大招了鸯乃，直接在瀏覽器上安裝插件
需要翻墻去google插件商城下載。
用的時候把開關(guān)打開就行跋涣，不用的話就關(guān)了缨睡，不然很容易受CSRF攻擊。
