Vue学习总结-Vue前端解决跨域问题

本是古典何须时尚 2022-12-26 00:56 207阅读 0赞

## 场景 ##

在vue开发中，我们采用前后端分离的模式进行开发，

则前端渲染的数据都需要从后端获得，这样就会带来跨域问题。

![20201202223821604.png][]

## 思路 ##

解决跨域问题，正常情况下有两种，既然涉及到两端，那么大的就是从两端各自处理。

第一种：从后端处理。就是在后端代码中通过过滤器等方式允许请求进行跨域访问，

这种方法在之前的springboot文档中有记录，此处不再叙述。

第二种：从前端vue处理，vue提供了相关的配置，通过代理的方式进行跨域请求。

这里着重记录下第二种，因为我们开发中，没法要求后端都去给你写允许跨域请求，而且有可能还涉及多个后端。

## 步骤 ##

1：在vue项目的根目录下建立vue.config.js文件（正常项目应该都会有这个文件）

2：在vue.config.js文件中增加devServer配置

module.exports = {
        devServer: {
            proxy: {
                '/api': { // 请求的代称，写在Axios里的BaseUrl
                    target: 'http://localhost:8088/spring', // 真实请求URl
                    ws: true,
                    changeOrigin: true, // 允许跨域
                    pathRewrite: { //替换，通配/api的替换成对应字符
                    //     /* 重写路径，当我们在浏览器中看到请求的地址为：http://localhost:8080/api/core/getData/userInfo 时
                    //       实际上访问的地址是：http://localhost:8088/spring/core/getData/userInfo,因为重写了 /api
                    //      */
                        '^/api': '' //当你的接口中没有/api字眼时，采用这种，直接替换成空即可
                    //     '^/api': '/api'   //当你的接口中刚好有/api 时，采用这种方式
                    }
                }
            }
        }
    }

3:在main.js中定义全局变量，统一Host路径，方便各组件进行调用：

Vue.prototype.HOST = '/api';

4：在自己的请求处调用接口

至此，结束。

--------------------

注意点：有个很重要的地方：

***vue.config.js配置文件中的 pathRewrite 参数一定要配置！！！！***

刚开始按照官方文档中的介绍，直接配置的，可坑的是，官方文档中的例子竟然没有这个参数，吐血，这也算是官方的一个坑吧！！

--------------------

补充！！！，为了完整性，还是将第一种在后端的代码也贴出来，方便后面查找（注意：我后端框架是基于的springboot）

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() {
    
        }
    }

--------------------

补充！！

上面是在开发环境上配置的跨域问题，那么当我根据上面，对vue项目进行npm run build进行打包部署后，又发现跨域问题。

问题来了，生产环境如何解决跨域问题，在网上搜了一大圈，发现大家主流的好像都是通过Nginx进行代理的，于是先测试了一下，

找了个干净的nginx，然后在nginx.conf文件中进行了配置，如下：

server {
            listen       8080;
            server_name  localhost;
            #charset koi8-r;
            #access_log  logs/host.access.log  main;
    
            location / {
                root   e:\dist; #这个是我的vue打包后的文件放的路径
                index  index.html index.htm;
            }
    #配置代理路径 /ceshi  这个根据你实际的代理路径进行替换
    	    location /ceshi {
                proxy_pass   http://localhost:8088/server; #代理地址，根据实际替换
                #index  index.html index.htm;
            }
    ###............后面的都是nginx带的，这里就不再贴了

[20201202223821604.png]: /images/20221120/2a8bd850ca9c474caa26db54d22bcddf.png