vue项目代理服务器

场景：

项目开发的时候，后端给我一个接口地址，我需要从这个地址获取数据，如果后端做了跨域设置，我就能正常拿到数 据，如果后端没有处理，客户端向服务端发送请求时就会出现跨域（cors）

为什么会出现跨域的问题？

• 跨域：是浏览器产生的同源策略产生的跨域，服务器之间不存在跨域问题

• 同源策略：浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都会触发浏览器同源策略。

• 在前后端分离的模式下，前后端的域名是不一致的，此时就会发生跨域访问问题。

• 跨域问题是针对JS和ajax的。而axios是通过Promise实现对ajax技术的一种封装，也同样存在跨域问题。

解决思路

基于前面的知识和场景，我在项目里使用了反向代理这种解决方案

• 在vue项目中开启一个代理服务器

• 代理服务器 向 数据服务器(目标服务器) 发起请求

• 代理服务器 和 前端项目同源，也就没有跨域问题

代码展示 --- vue项目

1、在config文件中修改index.js

// 这里展示了两个代理地址
module.exports = {
  dev: {
    proxyTable: {
       // 这里的 uas 表示如果我们的请求地址以 /uas 开头的时候，就出触发代理机制
      '/uas': {//http
        target: "http://124.70.216.106:10000", //需要代理的地址，就是后端服务器地址
        changeOrigin: true,//是否跨域，需要设置此值为 true 才可以让本地服务代理我们发出请求
        pathRewrite: {
          '^/uas': '/uas'
        }
      },
      '/api': {//https
        target: 'https://172.16.4.238:14022',
        secure:false,//在代理https时，关键在设置这个值为false，不需要安全证书
        changeOrigin: true,
        pathRewrite: {
           '^/api': '/api'
        }
     },
   }
 }

2、在config文件中修改dev.env.js

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',//这里需要使用双个引号
  API_HOST:'/api/' //开发环境中加上这段关键，不然出错
})

3、在config文件中修改prod.env.js

module.exports = {
  NODE_ENV: '"production"',//这里需要使用双个引号
  API_HOST: 'http://172.16.4.238:14022'//生产环境中加上这段关键，不然出错
}

4、在你请求的端口之前加上

 this.$axios({
     url: '/api/captch/sent?phone' //这里需要在你请求的端口之前加上/api/.
     method: 'POST',
 }) 

总结： 这4步一步也不能少，谨记