前端vue开发中的跨域问题解决，以及nginx上线部署。（vue devServer与nginx）

前言

最近做的一个项目中使用了vue+springboot的前后端分离模式

在前端开发的的时候，使用vue cli3的devServer来解决跨域问题

上线部署则是用的nginx反向代理至后台服务所开的端口

正文

开发环境中的跨域

首先，要确定后台服务的ip与端口

这里我的后台开的是

localhost:8081

npm run serve在8080端口

一般我们使用ajax请求的时候，会可以把url ip:port/api 写在ajax请求的url参数中

this.axios.get("localhost:8081"+ `/bpi/api/DayTradeinfoMarketStatusSearch?ddate=${day}`)

这样，这个请求就是从localhost:8080发向localhost:8081,端口不同这就遇到了跨域的问题

vue cli WebpackDevServer 解决跨域的方法是通过node开一个服务器进行代理。

前台发向后台服务器的请求，先发向node所开的服务，node服务器以相同的参数向真正的服务器进行请求，再把响应返回给前台。

禁止跨域是浏览器的安全策略限制

这里有两个误区

1. ✕ 动态请求就会有跨域的问题
   
   ✔ 跨域只存在于浏览器端，不存在于安卓/ios/Node.js/python/ java等其它环境
   
   2.✕ 跨域就是请求发不出去了
   
   ✔ 跨域请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了
   
   详情请看
   
   我知道的跨域与安全-李银成

在vue cli3中的配置

在package.json同级目录下新建vue.config.js文件

//vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/bpi': {                                //   以'/bpi'开头的请求会被代理进行转发
        target: 'http://localhost:8081',       //   要发向的后台服务器地址  如果后台服务跑在后台开发人员的机器上，就写成 `http://ip:port` 如 `http:192.168.12.213:8081`   ip为后台服务器的ip
        changeOrigin: true
      }
    }
  }
}

ajax请求的写法

this.axios.get(`/bpi/api/DayTradeinfoMarketStatusSearch?ddate=${day}`)       //相比上面的写法，这里吧ip和端口去掉了，这样所发的请求会自动补全为 `localhost:port/api`    (port是npm run serve所开的端口)

这样，如果打开浏览器调试工具的network会发现请求依然发向 localhost:8080而不是后台服务的端口8081

但是没得关系，node已经帮你向8081端口请求了数据~

上线的时候使用nginx进行部署

使用npm run build命令打包，得到dist文件夹里面的内容就是静态文件，使用任何一个服务器返回里面的index.html就能在浏览器看到页面。

要注意服务器映射的目录和vue build的时候的路径配置

即vue.comfig.js里的 publicPath配置项

//vue.config.js
module.exports = {
  publicPath:'./',   //可以理解成build出来的index.html从哪里找他引用的js、css等文件。默认是"/"从根目录寻找
  devServer: {
    hotOnly:true,
    disableHostCheck:true,
    proxy: {
      '/bpi': {
        target: 'http://localhost:8081',
        // ws: true,
        // port:8083
        changeOrigin: true
      }
    }
  },
}

publicPath配置为"./" 时：

<script src=js/chunk-vendors.9049ec28.js></script><script src=js/app.379ce736.js></script>

publicPath配置为"/" 时：

<script src=/js/chunk-vendors.9049ec28.js></script><script src=js/app.379ce736.js></script>

nginx的配置

把dist中的内容放到nginx安装目录下的html文件夹里（也可以在conf文件夹的nginx.conf中修改要映射的文件夹）

打开nginx.conf

#nginx.conf
#只贴了一些重要内容上来，其他的配置保持默认就好
http {
    server {
        listen       8082;                   //监听的端口
        server_name  localhost;              

        location / {                         // 表示 以'/'开头的请求怎样处理
            root   html;                     //指定root文件夹为 上面提到的html文件夹
            index  index.html;               //返回index.html
        }
        location /bpi{                       // 表示 以'/bpi'开头的请求 怎样处理
            proxy_pass http://localhost:8081;     //以同样的蚕食向这个地址请求，并返回给客户端
        }

    }
}

这样，我们访问localhost:8082的时候，就会把index.html文件返回

虽然network显示接口是发现8082的，但是会反向代理到8081，这样就从后台服务器拿到了数据~~~~

vue部署的时候还剩下一个问题

由于vue开发的是单页面应用（可以看到，一般情况下build出来的dist文件夹里面只有一个html文件）

虽然我们通过vue-router可以实现各种路由，但是在部署之后，页面一刷新就会碰到404错误

这是由于 如果刷新之前 的路由是localhost:8082/bookList/detail ，这样的话刷新之后向服务器请求的是root文件夹下的bookList文件夹下的detail,而不是根目录中的index.html了，这就需要做一点小处理

#error_page 404 /index.html; //404的时候就返回index.html

#nginx.conf
#只贴了一些重要内容上来，其他的配置保持默认就好
http {
    server {
        listen       8082;                   //监听的端口
        server_name  localhost;              

        location / {                         // 表示 以'/'开头的请求怎样处理
            root   html;                     //指定root文件夹为 上面提到的html文件夹
            index  index.html;               //返回index.html
        }
        location /bpi{                       // 表示 以'/bpi'开头的请求 怎样处理
            proxy_pass http://localhost:8081;     //以同样的蚕食向这个地址请求，并返回给客户端
        }

        error_page  404              /index.html;   //404的时候就返回index.html
    }
}

404的时候就返回index.html

这样进入到index.html后,vue-router再根据地址栏的地址，来决定渲染什么模板，如此一来任性的甲方再怎么刷新也不会报404啦~~