前后端分离跨域问题

跨域是指不同域名之间相互访问。跨域后浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。

同一个域：同一协议，同一ip，同一端口，三同中有一不同就产生了跨域。

如果在A网站中，我们希望使用Ajax来获得B网站中的特定内容，如果A网站与B网站不在同一个域中，那么就出现了跨域访问问题。

我用的后端是springboot，编码步骤如下：

1.配置类，指定可以被跨域访问的路径以及可以跨域的主机链接

package com.jp.tech.applet.web.config;

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;

/**
 * 解决跨越配置类
 * @author yangfeng
 *
 */
@Configuration
public class CorsConfig {

   private CorsConfiguration buildConfig() {
      CorsConfiguration corsConfiguration = new CorsConfiguration();
      corsConfiguration.addAllowedOrigin("*");
      corsConfiguration.addAllowedHeader("*");
      corsConfiguration.addAllowedMethod("*");
      return corsConfiguration;
   }

   /**
    * 跨域过滤器
    *
    * @return
    */
   @Bean
   public CorsFilter corsFilter() {
      UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
      source.registerCorsConfiguration("/**", buildConfig());
      return new CorsFilter(source);
   }
}

2.拦截器控制请求响应头配置

package com.jp.tech.applet.web.interceptors;

import com.alibaba.fastjson.JSON;
import com.jp.tech.applet.common.jwt.JWTHelper;
import com.jp.tech.applet.common.resource.ResourceUtil;
import com.jp.tech.applet.common.result.ErrorConstants;
import com.jp.tech.applet.common.result.ResultModel;
import io.jsonwebtoken.Claims;
import org.apache.commons.lang3.StringUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.http.MediaType;
import org.springframework.stereotype.Component;
import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * @Describe 
 * @Auther 
 * @Date 
 */
@Component
public class AppLoginInterceptor implements HandlerInterceptor {
    private Logger logger = LoggerFactory.getLogger(this.getClass());

    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        String token = request.getHeader(ResourceUtil.getSystem("JWT.TOKEN.NAME"));
        response.setCharacterEncoding("UTF-8");
        response.setHeader("Access-Control-Allow-Origin", "*");//响应头设置，跨域
         response.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE");
        response.setHeader("Access-Control-Allow-Headers","Origin, X-Requested-With, Content-Type, Accept");


        if (StringUtils.isBlank(token)) {
            response.getWriter().write(JSON.toJSONString(ResultModel.customError
                    (ErrorConstants.INVALID_LOGIN_CODE,
                            ErrorConstants.INVALID_LOGIN_MSG)));
            return false;
        }

        Claims claims = JWTHelper.checkLoginToken(token);
        if (claims == null) {
            response.getWriter().write(JSON.toJSONString(ResultModel.customError
                    (ErrorConstants.INVALID_LOGIN_CODE,
                            ErrorConstants.INVALID_LOGIN_MSG)));
            return false;
        }
        return true;
    }

    @Override
    public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception {

    }

    @Override
    public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception {

    }
}

3.配置拦截器

package com.jp.tech.applet.web.interceptors;

import org.springframework.boot.SpringBootConfiguration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

import javax.annotation.Resource;

/**
 * @author 
 * @create 
 **/
@SpringBootConfiguration
public class AppInterceptorAdapter extends WebMvcConfigurerAdapter {

    @Resource
    private AppLoginInterceptor appLoginInterceptor;

    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        //注册自定义拦截器，添加拦截路径和排除拦截路径
         registry.addInterceptor(appLoginInterceptor)
                .addPathPatterns("/**")
                .excludePathPatterns("/getLoginSessionKey")；
    }
}

参考：ajax跨域

前端 | 浅谈preflight request

前后端分离跨域问题解决方案

前后端分离跨域问题

猜你喜欢