前后端分离爬坑-JAVA后端解决跨域问题

2,031 阅读1分钟

1.新建interceptor包并新建CorsConfig类,直接贴代码;

package com.springboot.demo.interceptor;
import org.springframework.boot.web.servlet.FilterRegistrationBean;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * 跨域请求filter
 */
@Configuration
public class CorsConfig {
    @Bean
    public FilterRegistrationBean filterRegistrationBean() {
        FilterRegistrationBean registrationBean = new FilterRegistrationBean();
        registrationBean.setOrder(0);
        registrationBean.setName("CorsFilter");
        registrationBean.addUrlPatterns("/*");
        registrationBean.setFilter(new Filter() {
            @Override
            public void init(FilterConfig filterConfig) throws ServletException {
            }

            @Override
            public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
                HttpServletRequest httpRequest = (HttpServletRequest) request;
                HttpServletResponse httpResponse = (HttpServletResponse) response;
                httpResponse.setHeader("Access-Control-Allow-Origin", httpRequest.getHeader("Origin"));
                httpResponse.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
                httpResponse.setHeader("Access-Control-Max-Age", "0");
                httpResponse.setHeader("Access-Control-Allow-Headers", "Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With,userId,token,Access-Control-Allow-Headers , token, sid");
                httpResponse.setHeader("Access-Control-Allow-Credentials", "true");
                httpResponse.setHeader("XDomainRequestAllowed", "1");
                chain.doFilter(request, response);
            }
            @Override
            public void destroy() {
            }
        });
        return registrationBean;
    }

}

2.提取服务端地址进行封装

(function(root){

    //Nginx通用请求地址:解决前后端分离跨域问题
    root.BaseUrl = 'http://localhost:8888/';
}(this));

3.修改前端ajax请求

$.ajax({
        url: BaseUrl + 'user/createUser',
        type: "post",
        data: ajaxdata,
        dataType: "json",
        success: function (data) {
          if (data.message=="success"){
            alert("注册成功")
          }
        }
      });

跨域问题从后端解决,脱离NGINX。 ♪(^∇^*)