Vue项目中跨域问题的解决

前言

在Web端Vue项目开发过程中，跨域问题是不可避免的；在我参与的Vue项目中，使用服务器代理的解决方案；针对不同的环境（开发环境/生产环境），采用了不同的服务器代理方案；

服务器代理的原理大概是这样：
代理服务器和访问源（请求端）是同源的，但和被访问服务器（资源端）是不同源的，但服务器之间的访问不受浏览器同源策略的影响(即不必担心是否有跨域问题)，那么我们即可请求到同源服务器上的从被访问服务器上的获取到的请求资源了；

Webpack配置proxy实现代理——开发环境

参与的项目工程通过Vue-cli3来搭建的，因此没有了Webpack的显式配置文件；需要我们在工程根目录下手动创建vue.config.js去实现 Webpack的配置

Vue cli3 工程目录结构

新增Vue.config.js

module.exports = {
  devServer: {
    host: '127.0.0.1',
    port: 8084,
    open: true,// vue项目启动时自动打开浏览器
    proxy: {
      '/api': { // '/api'是代理标识，用于告诉node，url前面是/api的就是使用代理的
        target: "http://219.216.5.26:8080", //目标地址，一般是指后台服务器地址
        changeOrigin: true, //是否跨域
        pathRewrite: { // pathRewrite 的作用是把实际Request Url中的'/api'用""代替
          '^/api': "" 
        }
      }
    }
  }
}

这样配置完成后，我们发起的每次http请求的Request Url的前面一部分都会和我们本地的源一样；
举例：

Axios.get("/api/bookCate")

我们项目跑在开发环境下的http://localhost:8080上，那么上述请求的Request Url的就是 http://localhost:8080/api/bookCate;这应该就是我们的代理服务器中该资源的地址，与客户端同源；而数据的实际来源则是http://219.216.5.26:8080/api/bookCate，这样即实现代理跨域；

该方法的原理

目前猜测这个代理服务器可能是Node；

Nginx代理——生产环境

nginx版本：1.16.1
修改nginx.conf文件下的serve下配置：

        listen       8088;  //端口号
        server_name  localhost; 
        // 打包之后项目放到的路径；
        location / {
            root   dist;  // dist是指和nginx.exe同级的dist目录 ，一般默认是html文件夹
            index  index.html index.htm;  // dist文件夹下的html文件
        }
        // 此处是服务器代理部分，为解决http请求跨域问题
        // 若服务器已设置允许跨域，则这块就不需要了
        location /api{
            proxy_pass http://219.216.5.26:8080/api； 
                // 被代理服务器地址
        }

举例：

Axios.get("/api/bookCate") 
//其实想要访问的是 "http://219.216.5.26:8080/api/bookCate" 下的资源

生产环境下的,我们项目跑Nginx服务器监听的http://localhost:8088上，那么上述请求的Request Url的就是 http://localhost:8088/api/bookCate;
这应该就是我们的代理服务器中该资源的地址，与客户端同源；
而数据的实际来源则是http://219.21.5.5:9903/api/bookCate，这样即实现代理跨域；

最后编辑于：2020.07.01 23:43:37