一、開發(fā)環(huán)境
為洛陽等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù)，及洛陽網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)、洛陽網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！
二、跨域問題
本地使用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ò)請求，url會有包含三個(gè)主要信息：協(xié)議（protocol），域名（host），端口號（port）。當(dāng)三部分都和服務(wù)器相同的情況下，屬于同源。但是只要有一個(gè)不同,就屬于構(gòu)成了跨域調(diào)用。會受到同源策略的限制。
同源策略限制從一個(gè)源加載的文檔或腳本如何與來自另一個(gè)源的資源進(jìn)行交互。這是一個(gè)用于隔離潛在惡意文件的關(guān)鍵的安全機(jī)制。瀏覽器的同源策略，出于防范跨站腳本的攻擊，禁止客戶端腳本（如 JavaScript）對不同域的服務(wù)進(jìn)行跨站調(diào)用（通常指使用XMLHttpRequest請求）。
三、解決方法
(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");//允許跨域的請求方式
/**
* ajax請求的時(shí)候如果帶有xhrFields:{withCredentials:true}，
* 那么服務(wù)器后臺在配置跨域的時(shí)候就必須要把Access-Control-Allow-Credentials這個(gè)請求頭加上去
*/
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
}
}參考:跨域資源共享 CORS 詳解——阮一峰
(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",//對應(yīng)后端端口
secure: false,
changeOrigin: true
}//如果Controller的Requestmapping有多個(gè)這里也要對應(yīng)多個(gè)
,'/test/*': {
target: "http://localhost:8080",
secure: false,
changeOrigin: true
}
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
