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

场景

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

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

思路

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

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

这种方法在之前的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：在自己的请求处调用接口

<script>
export default {
  name: "FooterComponent",
  methods: {
    testClick: function () {
      console.log("444444444444444");
      this.axios.get(this.HOST + "/selectUserList")
          .then(function (response) {
            // handle success
            console.log(response);
          })
          .catch(function (error) {
            // handle error
            console.log(error);
          })
          .then(function () {
            // always executed
          });
    }
  }
}
</script>

至此，结束。

---

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

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带的，这里就不再贴了