Vue跨域问题

随着项目前后端分离的趋势，跨域始终是一个绕不开的问题，一个本可以正常访问的接口，但在项目中请求就是发不出去，是什么原因导致的呢？

• 存在即合理，既然跨域那么烦人，那它存在的理由是什么呢？这里我们先了解一下浏览器的“同源策略”。

同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

• 浏览器的同源策略，别的先不管，我们只要知道它是一个安全机制就行了。详情请点击：浏览器的同源策略

同源的定义

如果两个页面的协议，端口（如果有指定）和域名都相同，则两个页面具有相同的源。

URL	结果	原因
http://store.company.com/dir2/other.html	成功
https://store.company.com/secure.html	成功
https://store.company.com/secure.html	失败	不同协议 ( https和http )
http://store.company.com:81/dir/etc.html	失败	不同端口 ( 81和80)
http://news.company.com/dir/other.html	失败	不同域名 ( news和store )

• 举个例子：vue项目通过8081访问，后端项目通过8082访问，因为端口不同，所以前端请求后端时就会出现跨域问题。

• 了解了同源策略后，我们不禁要问，浏览器为何要这么做呢？出于什么安全考虑的呢？

想象一下，你通过浏览器登录并信任了淘宝，淘宝将你的信息保存在cookie里，下次你再访问淘宝时，就无需再次登录，因为淘宝已经通过cookie认识你了。这时候，如果你访问了其他危险的网站，如果没有同源策略，该网站可以通过cookie以你的名义去操作你的淘宝，会导致安全隐患。这就是著名的CSRF攻击。

• 看到这里，是不是觉得跨域就没那么讨厌了呢？毕竟浏览器也是为了保护我们的安全。

• 安全归安全，在保证安全的前提下，项目出现问题还是要解决的。下面说一下我的解决办法。

---

• 安装axios

npm install axios --save

• 不着急引入，我们先配置一下，修改项目目录下config文件夹里的三个js文件

• dev.env.js

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_HOST: '"/api/"' // 开发环境接口前缀
})

• prod.env.js

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  API_HOST: '"/one/"' // 生产环境接口前缀
}

• index.js在dev对象下新增proxyTable

proxyTable: {
      '/api': {
        target: 'http://localhost:8088/one',// 接口的域名
        changeOrigin: true,// 如果接口跨域，需要进行这个参数配置
        pathRewrite:{
          '^/api':''
        }
      }
    },

能力有限，我说一下我自己的理解：首先dev.env.js是在开发环境时加载使用的，prod.env.js是在生产环境时使用的。开发环境时，在index.js中配置proxyTable，vue会帮我们把 “/api/*”下的所有请求转发到‘localhost:8088/one”下，这是开发环境。 ’

开发环境时，vue可以帮我们做代理，解决跨域问题，但是生产环境呢？
我们知道，生产环境时，我们是直接将vue项目打包成一个静态文件的，也就无来代理一说，所以这里我用的nginx来帮我们代理转发请求。
这也就是为什么我的开发和生产的js配置的请求前缀不一样的原因了。

• 配置好后，我们在main.js中引入axios并做简单配置

import axios from 'axios'
//设置请求前缀（根据开发和生产环境自动切换，无需另外配置）
axios.defaults.baseURL = process.env.API_HOST
Vue.prototype.axios = axios
Vue.config.productionTip = false

• 引入后，请求时，url只需输入接口后缀，axios会自动帮我们把配好的前缀给带上

this.axios.get('shortVideo/grabIds').then(response=>{
    //具体实现代码
});

项目只需配置一次即可，还是挺简单的。鄙人浅见，理解错误的地方，望指正，感激不尽。