Vue跨域解决方案

出现跨域的原因

一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即跨域。

前端解决方法（使用代理）

项目内接口写法：

配置项目接口根路径main.js

1.开发环境

配置目录

dev.env.js,index.js:开发环境配置文件，其中index.js文件中主要配置项目的ip和端口号以及其他的一些常规配置，如：打包。

prod.env.js:生产环境配置文件，这边最常用的就是配置打包后的接口地址。如果这里的API_HOST:“‘localhost:1000’” ，则打包后运行的项目访问的接口地址就为localhost:1000。

注：如果不存在跨域问题！ prod.env.js和dev.env.js这两个文件的API_HOST直接填写需要调用的接口地址即可。

proxy解决跨域

在配置文件config文件下的index.js中写入

主要是proxyTable。

原理： Vue项目其实是在webpack-dev-server下运行的，设置了代理后，webpack-dev-server会去匹配你项目里的接口路径，匹配上的会直接使用target配置的内容去替换访问，也就是浏览器先给webpack-dev-server服务发送请求，然后这个服务代理你去请求后端真实的接口地址。

2.生产环境

这个时候就需要将项目打包了，npm run build

这个时候就又出问题了！打包后怎么去执行他，并不像简单的html文件，直接点开就好了，他需要在服务上跑。可以选用node、apache、tomcat等。我用的是Node的Express去部署。

Express部署流程

1.找一个自己喜欢的文件目录（demo）先安装express。 npm install express

2.在目录下运行npm init -y，初始化项目

3.npm install，安装依赖

4.将打包后生成的dist文件夹放到demo文件夹下

5.创建一个app.js文件，在里面写入：（也可以叫其他名字）

const express = require('express')
let app = express()
// 将前端项目所在文件夹设置为静态资源
app.use('/', express.static('./dist', {
      cacheControl: false,
      etag: false,
      lastModified: false
}))
app.listen(3000)
​

6.最后执行node app.js启动这个服务就OK了，直接访问localhost:3000就可以访问你的前端页面了。

跨域

在app.js里写入这段代码就OK了

还需要安装http-proxy-middleware依赖：npm install http-proxy-middleware

const { createProxyMiddleware  } = require('http-proxy-middleware')  //这个依赖的版本为1.0以上写法
//const proxy = require('http-proxy-middleware')  //1.0一下这样写也可以，如果1.0以上的话这种写法会报错“proxy不是一个方法”
app.use('/api', createProxyMiddleware({ 
    // 转发到5000端口
    target: 'http://localhost:5000',  //你访问的接口地址
    // 转发时重写路径
    pathRewrite: {'^/api' : ''},
    changeOrigin: true }));

踩到的坑

1.如果配置跨域了的话千万不要在config文件中的drod.env.js和dev.env.js里配置接口地址，不然的话还是相当于你前端项目直接去访问接口地址。比如你前端请求的路径写的：auth/login，但是你在配置文件里面配置了地址：localhost:3000，那么相当你的请求路径是“localhost:3000/auth/login”，而不是“auth/login”，就算你做了代理，代理的匹配路径就算是auth也匹配不到，当然可以试试匹配路径为“localhost:3000/auth”,但是没必要这样写。

2.最常见的设置允许跨域，这个属于后端设置的，也就是前端去访问的服务，这个服务需要允许跨域，但是前端还是需要设置代理的，不然的话还是行不通，两个配合着来绝对不会跨域。

最后！运行前端的服务不需要设置允许跨域，允许跨域指的是别人访问你允许跨域，而不是你访问别人。

总结！总结！总结！

不存在跨域的时候直接配置接口地址就行了。

存在跨域的时候！接口地址一定不要在前端配！一定不要在前端配！一定不要在前端配！ 只需要在你的项目里面写入路径就好了，然后在服务里面配置接口地址。服务匹配地址，匹配到了就将那个路径替换为真实地址。