詳解Springboot+React項(xiàng)目跨域訪問問題
一、開發(fā)環(huán)境
- 框架:springboot 1.5.10.RELEASE
- 開發(fā)工具:IDEA
- JDK:1.8
- 前端框架:React 15.6.1
- 瀏覽器:Chrome瀏覽器
二、跨域問題
本地使用ajax訪問localhost:8080端口時(shí)報(bào)錯(cuò):
Failed to load http://localhost:8080/test/test.do: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘null’ is therefore not allowed access.
React與Springboot前后端分離,React端口為3000而Springboot端口為8080,跨端口訪問用尋常的ajax是無法跨域訪問的。
什么是跨域?
當(dāng)客戶端向服務(wù)器發(fā)起一個(gè)網(wǎng)絡(luò)請(qǐng)求,url會(huì)有包含三個(gè)主要信息:協(xié)議(protocol),域名(host),端口號(hào)(port)。當(dāng)三部分都和服務(wù)器相同的情況下,屬于同源。但是只要有一個(gè)不同,就屬于構(gòu)成了跨域調(diào)用。會(huì)受到同源策略的限制。
同源策略限制從一個(gè)源加載的文檔或腳本如何與來自另一個(gè)源的資源進(jìn)行交互。這是一個(gè)用于隔離潛在惡意文件的關(guān)鍵的安全機(jī)制。瀏覽器的同源策略,出于防范跨站腳本的攻擊,禁止客戶端腳本(如 JavaScript)對(duì)不同域的服務(wù)進(jìn)行跨站調(diào)用(通常指使用XMLHttpRequest請(qǐng)求)。
三、解決方法
(1)java后端過濾器實(shí)現(xiàn)cros:
在后端配置過濾器CrosFilter
public class CorsFilter implements Filter {
public void init(FilterConfig filterConfig) throws ServletException {
}
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
throws IOException, ServletException {
HttpServletResponse httpResponse = (HttpServletResponse) response;
httpResponse.setHeader("Access-Control-Allow-Origin", "http://localhost:3000");//設(shè)置允許跨域的域名,需要發(fā)送cookie信息,所以此處需要指定具體的域名,
httpResponse.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
httpResponse.setHeader("Access-Control-Allow-Methods", "GET, PUT, DELETE, POST");//允許跨域的請(qǐng)求方式
/**
* ajax請(qǐng)求的時(shí)候如果帶有xhrFields:{withCredentials:true},
* 那么服務(wù)器后臺(tái)在配置跨域的時(shí)候就必須要把Access-Control-Allow-Credentials這個(gè)請(qǐng)求頭加上去
*/
httpResponse.setHeader("Access-Control-Allow-Credentials", "true");//允許發(fā)送Cookie信息
httpResponse.setHeader("Cache-Control", "no-cache, no-store, must-revalidate"); // 支持HTTP 1.1.
httpResponse.setHeader("Pragma", "no-cache"); // 支持HTTP 1.0. response.setHeader("Expires", "0");
chain.doFilter(request, response);
}
public void destroy() {
// TODO Auto-generated method stub
}
}(2)使用代理服務(wù)器跨域訪問:
在dev.js中配置
devServer: {
port: '3000',//開發(fā)端口
host: '127.0.0.1',//主機(jī)地址
historyApiFallback: false,
disableHostCheck: true,
noInfo: false,
stats: 'minimal',
inline: true,
//開啟服務(wù)器的模塊熱替換(HMR)
hot: true,
// 和上文 output 的“publicPath”值保持一致
publicPath: context,
proxy: {
'/mytest/*': {
target: "http://localhost:8080",//對(duì)應(yīng)后端端口
secure: false,
changeOrigin: true
}//如果Controller的Requestmapping有多個(gè)這里也要對(duì)應(yīng)多個(gè)
,'/test/*': {
target: "http://localhost:8080",
secure: false,
changeOrigin: true
}
}
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
使用Jenkins Pipeline自動(dòng)化構(gòu)建發(fā)布Java項(xiàng)目的方法
這篇文章主要介紹了使用Jenkins Pipeline自動(dòng)化構(gòu)建發(fā)布Java項(xiàng)目的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-04-04
SpringBoot開啟server:compression:enabled(Illegal characte
本文主要介紹了SpringBoot開啟server:compression:enabled(Illegal character ((CTRL-CHAR, code 31)))的的問題解決,具有一定的參考價(jià)值,感興趣的可以了解一下2025-03-03
java 請(qǐng)求跨域問題解決方法實(shí)例詳解
Java為什么匿名內(nèi)部類參數(shù)引用需要用final進(jìn)行修飾?
java 增強(qiáng)型for循環(huán)語法詳解

