关于 vue-cli2.x 的端口跨域的问题解决

什么是跨域？

首先解释一下什么是同源策略

同源策略：   
     a.前端发送请求时，浏览器的安全策略   
     b.url的 协议名、域名、端口号 必须完全一致   

个人理解：违背同源策略，就会产生跨域问题，所以会出现以下三种跨域的方式。

跨域的三种方式

1、协议跨域即 只有http 和 https 不同
例：http://localhost:8080/ https://localhost:8080/
2、域名跨域即 只有http:// 或 https:// 到端口之间的那一段东西不同
例：http://www.baidu.com:8080 http://www.zhihu.com:8080
3、端口跨域即 只有端口不同
例：http://localhost:8080/ http://localhost:3000/

场景：(端口跨域问题解决)

前端地址：http://localhost:8080/
后端接口地址：http://localhost:3000/users

组件中用到封装的axios

看到这些代码不要头晕只要关注标注的主要代码那一行即可 *********主要代码***********

//封装axios
//导入axios
import axios from "axios";
//创建axios实例化对象
const service = axios.create({
  //设置baseURL可以自动添加到封装的url里
  
  baseURL: "",//*********主要代码***********
  
  //设置响应时间
  timeout: 3000,
  //设置请求头的格式
  headers: {
    "Content-Type": "application/json;charset=utf-8"
  }
});

//设置请求拦截
service.interceptors.request.use(
  function(res) {
    //请求前处理
    return res;
  },
  function(error) {
    //对请求错误进行处理
    return Promise.reject(error);
  }
);

//设置响应拦截
service.interceptors.response.use(
  function(rep) {
    //对响应的处理
    return rep;
  },
  function(error) {
    //对响应错误的处理
    Promise.reject(error);
  }
);
//抛出
export default service;

在其他组件中的craeted方法内调用封装的aixos发送请求到后端接口

created() {
    this.service
      .get("/api/users")//*********主要代码***********
      .then(res => {
        console.log(res);
      })
      .catch(err => {
        console.log(err);
      });
    console.log(data);
  }
};

解决方法： 在 项目/config/index.js 中加入以下代码：

//*********主要代码***********
proxyTable: {
      "/api": {
        target: "http://localhost:3000",
        changeOrigin: true,
        pathRewrite: {
          "^/api": "" //这里理解成用'/api'代替target里面的地址
        }
      }
    },

个人理解：通过在index.js中设置,让/api可以替换为http://localhost:3000,供请求中的url使用。

问题解决思路：

首先发生报错,先不要慌,百度一下到底是什么问题,就比如说,我百度了这个错误,是跨域问题,那什么是跨域呢,再进一步百度,得到三种跨域问题,再进一步思考,我的这个问题属于哪一个跨域问题,是端口跨域,结果照着其他大佬的解决方案做还是解决不了,再百度,发现我用的居然是vue-cli3.x的解决方案！！！最终百度到了vue-cli2.x的解决方案才得以解决。明确问题根源很重要！！！

以上纯个人理解,本人只是一名小白,有错误请大家指正,希望对大家有帮助