vue跨域问题

最新推荐文章于 2023-08-02 14:54:12 发布

Mr.ZYG

最新推荐文章于 2023-08-02 14:54:12 发布

阅读量224

点赞数

分类专栏： Vue初学前后端部署linux服务问题文章标签： vue.js 前端

本文链接：https://blog.csdn.net/Tel_17674647975/article/details/129693327

版权

Vue初学同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

前后端部署linux服务问题

2 篇文章 0 订阅

订阅专栏

后端：

package com.yzg.marketing.config;

/**
 * @ClassName CorsFilter
 * @Description:配置跨域
 * @Author @yangzhenguang
 * @CreateTime: 2023/3/21 17:02
 * @Version 1.0
 */


import org.apache.commons.lang3.StringUtils;
import org.springframework.stereotype.Component;

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

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

    }

    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        HttpServletRequest request = (HttpServletRequest) req;

        // 不使用*，自动适配跨域域名，避免携带Cookie时失效
        String origin = request.getHeader("Origin");
        if(StringUtils.isNotBlank(origin)) {
            response.setHeader("Access-Control-Allow-Origin", origin);
        }

        // 自适应所有自定义头
        String headers = request.getHeader("Access-Control-Request-Headers");
        if(StringUtils.isNotBlank(headers)) {
            response.setHeader("Access-Control-Allow-Headers", headers);
            response.setHeader("Access-Control-Expose-Headers", headers);
        }

        // 允许跨域的请求方法类型
        response.setHeader("Access-Control-Allow-Methods", "*");
        // 预检命令（OPTIONS）缓存时间，单位：秒
        response.setHeader("Access-Control-Max-Age", "3600");
        // 明确许可客户端发送Cookie，不允许删除字段即可
        response.setHeader("Access-Control-Allow-Credentials", "true");

        filterChain.doFilter(request, response);
    }

    @Override
    public void destroy() {

    }
}

前端：

修改位置

配置一下代码即可。

      '/api': {
        target:'http://127.0.0.1:8202/', //本地后端接口
        // secure: false, // 如果是https接口，需要配置这个参数
        changeOrigin:true,
        pathRewrite:{
          '^/api': ''   // http://127.0.0.1:80/vue-ssm/login  -->  http://api/vue-ssm/login
        }
      }