前后端分离开发，前后端（java+vue工程）分别处理跨域问题

后端实现跨域

后端处理跨域问题
在后端工程中添加拦截类，做跨域问题处理，具体代码如下：

package com.ssm01.util;

import org.springframework.stereotype.Component;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@Component
public class CoreFilter implements Filter {
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse httpResponse = (HttpServletResponse) response;
        httpResponse.setHeader("Access-Control-Allow-Origin", "*");//设置允许跨域的域名，需要发送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请求的时候如果带有xhrFields:{withCredentials:true}，
         * 那么服务器后台在配置跨域的时候就必须要把Access-Control-Allow-Credentials这个请求头加上去
         */
        httpResponse.setHeader("Access-Control-Allow-Credentials", "true");//允许发送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);
    }

    @Override
    public void destroy() {

    }
}

添加类后，在web.xml中添加如拦截器配置：

<filter>
<!--    <filter-name>characterEncodingFilter</filter-name>-->
<!--    <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>-->
    <filter-name>crossFilter</filter-name>
    <filter-class>com.ssm01.util.CoreFilter</filter-class>
    <init-param>
      <param-name>encoding</param-name>
      <param-value>UTF-8</param-value>
    </init-param>
  </filter>
  <filter-mapping>
<!--    <filter-name>characterEncodingFilter</filter-name>-->
    <filter-name>crossFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>

前端 vue 实现跨域

前端vue工程重处理跨域问题
在vue工程中的main.js中添加如下，这里使用的axios请求处理：

Vue.prototype.axios=axios
//axios.defaults.baseURL = "http://localhost:8081/SSM01";//后端处理了跨域处理，这里可以直接配置后端请求地址
axios.defaults.baseURL = "api";
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

然后再config文件夹下的index.js文件中做如下添加，添加在dev下的proxyTable中：

dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
       '/api': {
         target: 'http://localhost:8081', // 接口的域名
         // secure: false,  // 如果是https接口，需要配置这个参数
         changeOrigin: true,// 如果接口跨域，需要进行这个参数配置，为true的话，请求的header将会设置为匹配目标服务器的规则（Access-Control-Allow-Origin）
         pathRewrite: { '^/api': 'api' //本身的接口地址没有 '/api' 这种通用前缀，所以要rewrite，如果本身有则去掉 
         }
       }
    },

}