后端实现跨域
后端处理跨域问题
在后端工程中添加拦截类,做跨域问题处理,具体代码如下:
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,如果本身有则去掉
}
}
},
}