vue+ssm跨域

绅士1993

已于 2022-01-19 11:34:22 修改

阅读量284

点赞数

CC 4.0 BY-SA版权

分类专栏：快速入门文章标签： vue.js 前端 javascript

于 2022-01-19 11:26:31 首次发布

本文链接：https://blog.csdn.net/aitanxiaofeng/article/details/122576885

快速入门专栏收录该内容

30 篇文章

订阅专栏

本文介绍如何使用Vue.js项目的vue.config.js文件配置代理解决跨域问题，并通过后端配置过滤器实现跨域请求的支持。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端配置prox代理

vue.config.js配置代理

	//配置代理后,这里是'/api',那莫当你请求的路径中存在'/api'的时候,就会用代理方式进行跨域请求,
	//不一定非要用'/api',你用'/xxx'一样的
	//target是指代理到哪个服务地址
	//pathRewrite重写你请求路径中'/api'为对应自定义路径,如果值配置的是:'/',
	//那莫你请求路径加入为:'/api/user/list.do',代理路径会替换为'/api//user/list.do'
	//所以我下面配置的值为空字符
	//整体代理路径从'localhost:8080/api/user/list.do'变为'localhost:80/user/list.do'
	//'^/api'参数为正则表达式,自行定义
   proxy: {
      '/api': {
        target: 'http://localhost:80',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },

后端开启允许跨域

web.xml配置过滤器

    <!--跨域-->
    <filter>
        <filter-name>cors</filter-name>
        <filter-class>你的过滤器全限定类名</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>cors</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

配置过滤器

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

public class SimpleCORSFilter implements Filter {

    @Override
    public void destroy() {
    }

    @Override
    public void doFilter(ServletRequest req, ServletResponse res,FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
        chain.doFilter(req, res);
    }

    @Override
    public void init(FilterConfig arg0) throws ServletException {
    }

}