前后端分離開發(fā),開發(fā)完打包放入springboot部署。vue跨域問題的處理。
方法一：代理服務(wù)器（完美解決）
使用代理服務(wù)器可以在開發(fā)環(huán)境解決跨域，但一旦打包放到springboot里，開發(fā)環(huán)境配置的代理服務(wù)器就不管用了。
所以axiso請(qǐng)求的base_url不能寫死，需要?jiǎng)討B(tài)獲取。根據(jù)瀏覽器中輸入的地址來(lái)獲取base_url。
let SQIMS_request =axios.create({
? ? baseURL: window.location.protocol+'//'+window.location.host,
})
這里的window.location.host獲取到的值是不帶http://的。
這樣子設(shè)置后，后端無(wú)需做任何跨域設(shè)置
方法二：前后端配置跨域（有點(diǎn)問題）
前端設(shè)置：
let SQIMS_request =axios.create({
? ? baseURL: window.location.protocol+'//'+window.location.host,
??? withCredentials:true? //開啟憑證，axios在請(qǐng)求的時(shí)候會(huì)攜帶 JSESSIONID,用以shiro驗(yàn)證。如無(wú)需驗(yàn)證，則不設(shè)置此項(xiàng)。配合后端全局跨域設(shè)置，也可解決跨域問題
})
后端設(shè)置
后端全局跨域配置
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
/**
* 跨域配置,允許跨域
*/
public class GlobalCorsConfig {
? ? private CorsConfiguration buildConfig() {
? ? ? ? CorsConfiguration corsConfiguration = new CorsConfiguration();
? ? ? ? corsConfiguration.addAllowedOrigin("*"); // 允許任何域名使用
? ? ?? // corsConfiguration.setAllowCredentials(true);
? ? ? ? corsConfiguration.addAllowedHeader("*"); // 允許任何頭
? ? ? ? corsConfiguration.addAllowedMethod("*"); // 允許任何方法（post、get等）
? ? ? ? return corsConfiguration;
? ? }
? ? public CorsFilter corsFilter() {
? ? ? ? UrlBasedCorsConfigurationSource source = new???????? UrlBasedCorsConfigurationSource();
? ? ? ? source.registerCorsConfiguration("/**", buildConfig()); // 對(duì)接口配置跨域設(shè)置
? ? ? ? return new CorsFilter(source);
? ? }
}
withCredentials開啟后，后端全局跨域配置的
corsConfiguration.addAllowedOrigin("*");
就失效了。
需要指定具體的host。例如
corsConfiguration.addAllowedOrigin("http://127.0.0.1:8080");
并且開啟
corsConfiguration.setAllowCredentials(true);
但此方法未能奏效，且沒法根據(jù)請(qǐng)求的host動(dòng)態(tài)設(shè)置。
也可以采用跨域過濾器，在響應(yīng)時(shí)，動(dòng)態(tài)設(shè)置 headers
import org.springframework.stereotype.Component;
import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
//@Component
//@WebFilter(urlPatterns = "/*", filterName = "CorsFilter")
public class CorsFilter implements Filter {
? ? @Override
? ? public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
? ? ? ? HttpServletResponse response = (HttpServletResponse) res;
? ? ? ? HttpServletRequest reqs = (HttpServletRequest) req;
? ? ? ? String curOrigin = reqs.getHeader("Origin");
? ? ? ? response.setHeader("Access-Control-Allow-Origin", curOrigin == null ? "true" : curOrigin);
? ? ? ? response.setHeader("Access-Control-Allow-Credentials", "true");
? ? ? ? response.setHeader("Access-Control-Allow-Methods", "POST, GET, PATCH, DELETE, PUT");
? ? ? ? response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
? ? ? ? chain.doFilter(req, res);
? ? }
? ? @Override
? ? public void init(FilterConfig filterConfig) {
? ? }
? ? @Override
? ? public void destroy() {}
}
似乎也未奏效
方法三
使用 jwt(sqims2采用的方式) + 后端全局跨域配置
此方式不需要代理服務(wù)器了,而且前后端無(wú)論是打包部署還是分別部署均可使用
備注
如果是前后端分離部署，
方法一
