Vue项目实现跨域请求（无config文件夹）

跨域

1、当前网页URl与请求的URL地址不同域名。
2、当前网页URl与请求的URL相同域名，不同端口。
3、当前网页URl与请求的URL不同协议。
即域名、端口和协议必须一样，不然就属于跨域请求。

问题

比如我现在在WebStrom运行vue项目，默认分配的端口号是8080，也就是我当前的项目打开的网页域名和端口号是

  http://localhost:8080/

此时我想请求本地的apche服务器的后端文件，例如：

  http://localhost/php/insert.jsp
  默认端口为80，所以该url没有显示端口号

两个URL虽然相同域名（localhost）,但是不同端口，如果不解决跨域问题，我不得不先将Vue项目打包，然后部署到本地服务器上调试，十分繁琐，而且效率很低。

解决

我是用的vue脚手架是4.X的，所以创建的vue项目并没有config文件夹，因为vue-cli3以后配置文件被隐藏了，这里需要在项目根目录下（与src文件夹同级）创建vue.config.js文件来修改默认的配置：
vue.config.js加入以下代码

module.exports = {
  devServer: {
    proxy: {
      //名字可以自定义，这里我用的是api
      '/api': {
        target: 'http://127.0.0.1/',//设置你调用的接口域名和端口号
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
};

在main.js加入：（目的是让每次axios发起请求时，请求的url都会加上’api/'）

axios.defaults.baseURL = 'api'; 

这里举出一个axios发送请求的例子：

this.axios.post('/php/select.php').then((response) => {
}).catch((err) => {
})

如果没有加设置跨域，那么请求的地址应该是：

http://localhost:8080/php/select.php

设置跨域处理以后：

http://localhost:8080/api/php/select.php
然后经过vue.config.js中代理的转换，
将'api/'以及之前的部分替换为'http://127.0.0.1/'后就是最终请求的路径:
http://127.0.0.1/php/select.php

这样便实现了跨域请求本地apche服务器上的后端文件，并可以通过后端文件来获取或者插入数据，达到开发测试的目的了。

原理

每次发送axios请求时，由于设置了axios.defaults.baseURL = 'api'; 所以自动会在请求的url前加上’ api/ ‘,然后vue.cofig.js中的代理检测到url中包含’ api/ ‘，就会将’ api/ '以及之前的部分替换为"tartget"属性的值，从而实现请求url的转换，让本地服务器去请求对应的数据。

这里之所以不会存在跨域是因为跨域的出现是服务器的安全策略导致的，服务器与服务器之间并不会产生跨域，所以本地服务器可以直接获取到资源。