ログインおよびvue-element-adminの統合中にクロスドメインリソース共有の問題が発生しました。CORS（クロスオリジンリソースシェアリング）はブラウザーの技術仕様です。ブラウザーはクロスドメインリクエストを開始できますが、Javascriptスクリプトは開始できません。従来のajaxはそれしか取得できません。同じドメイン名のリソースですが、Html5を使用すると、ajaxはクロスドメインリクエストを開始できます。ソリューションは、JSONP、Flash、IFrame、CORSです。
1. CORS（クロスドメインリソースシェアリング）の問題
vue-element-adminのログインモジュールのバックエンドインターフェイスが完了した後、フロントエンドが呼び出されたときにエラーが発生します。フロントエンドポートは9527、バックエンドポートは9090であるため、ポートは異なることに、ブラウザーは、呼び出されたインターフェースにクロスドメイン要求の問題があると考えます（クロスドメインはブラウザーの問題であり、ブラウザーはこのメカニズムをオフにすることができます）、
Access to XMLHttpRequest at 'http://localhost:9090/user/login' from origin 'http://localhost:9527' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. [http://localhost:9527/#/login?redirect=%2Fdashboard] 
次に、バックエンドがCORSの問題を解決します
2つの一般的なソリューションは、構成クラスを介して実行されます。1つはネイティブjava.servletクラスです。
package com.example.testspring.config;
import org.springframework.context.annotation.Configuration;
import org.springframework.core.annotation.Order;
import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebFilter(filterName = "CORSFilter", urlPatterns = {"/*"})
@Order(value = 1)
@Configuration
public class CorsFilter implements Filter {
@Override
public void init(FilterConfig filterConfig) throws ServletException {
}
@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain)throws IOException, ServletException {
System.out.println("Filter 过滤器 执行 了");
HttpServletRequest request = (HttpServletRequest) servletRequest;
HttpServletResponse response = (HttpServletResponse) servletResponse;
// 响应标头指定 指定可以访问资源的URI路径
response.setHeader("Access-Control-Allow-Origin", "*");
//响应标头指定响应访问所述资源到时允许的一种或多种方法
response.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE");
//设置 缓存可以生存的最大秒数
response.setHeader("Access-Control-Max-Age", "3600");
//设置 受支持请求标头
response.setHeader("Access-Control-Allow-Headers", "*");
// 指示的请求的响应是否可以暴露于该页面。当true值返回时它可以被暴露
response.setHeader("Access-Control-Allow-Credentials","true");
filterChain.doFilter(servletRequest, servletResponse);
}
@Override
public void destroy() {}
}もう1つは、springMVCのアノテーションクラスを使用する方法です。
package com.example.testspring.config;
import lombok.extern.slf4j.Slf4j;
import org.springframework.context.annotation.Configuration;
import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpMethod;
import org.springframework.http.HttpStatus;
import org.springframework.http.server.reactive.ServerHttpRequest;
import org.springframework.http.server.reactive.ServerHttpResponse;
import org.springframework.web.cors.reactive.CorsUtils;
import org.springframework.web.server.ServerWebExchange;
import org.springframework.web.server.WebFilter;
import org.springframework.web.server.WebFilterChain;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
import org.springframework.web.filter.CorsFilter;
@Slf4j
@Configuration
public class CorsConfiguration implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
log.info("===CORS已注入===");
registry.addMapping("/**")
.allowedOrigins("*")
.allowCredentials(true)
.allowedMethods("GET", "POST", "DELETE", "PUT","OPTION","OPTIONS")
.allowedHeaders("x-requested-with, authorization, Content-Type, Authorization, credential, X-XSRF-TOKEN,token,username,client")
.exposedHeaders("x-requested-with, authorization, Content-Type, Authorization, credential, X-XSRF-TOKEN,token,username,client")
.maxAge(18000);
}
}バックエンドがインターセプターをカスタマイズする場合は、事前チェック要求の処理を増やす必要があります。
// 预检请求，预检飞行
if(CorsUtils.isCorsRequest(request) && "OPTIONS".equals(request.getMethod())){
response.setCharacterEncoding( "UTF-8");
response.setContentType( "application/json; charset=utf-8");
response.setStatus(200);
response.setHeader("Access-Control-Allow-Credentials","true");
response.setHeader("Access-Control-Allow-Origin","http://localhost:9527");
response.setHeader("Access-Control-Allow-Origin","https://www.tiny.cloud/");
response.setHeader("Access-Control-Allow-Headers","x-requested-with, authorization, Content-Type, Authorization, credential, X-XSRF-TOKEN,token,username,client");
response.setHeader("Access-Control-Expose-Headers","x-requested-with, authorization, Content-Type, Authorization, credential, X-XSRF-TOKEN,token,username,client");
PrintWriter out = null ;
try{
JSONObject res = new JSONObject();
res.put( "200", "sucess");
out = response.getWriter();
out.append(res.toString());
return false;
}
catch (Exception e){
e.printStackTrace();
response.sendError( 500);
return false;
}