Vue开发中可能会遇到的跨域问题

什么是跨域

跨域是一个老生常谈的问题了，但是在解决问题之前我们还是要来再认识一下什么是跨域。

跨域问题归根结底就是浏览器的同源策略造成的

同源策略是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。

摘抄自MDN

同源的定义

如果两个URL的protocol(协议:HTTP、HTTPS)、port(端口)(如果有指定的话)和host(地址:domain)都相同的话，则这两个 URL 是同源。这个方案也被称为“协议/主机/端口元组”，或者直接是“元组”。（“元组”是指一组项目构成的整体，双重/三重/四重/五重/等的通用形式）。

下表给出了与URL的源进行对比的示例：

http://store.company.com/dir/page.html

URL	结果	原因
http://store.company.com/dir2/other.html	同源	只有路径不同
http://store.company.com/dir/inner/another.html	同源	只有路径不同
https://store.company.com/secure.html	失败	协议不同
http://store.company.com:81/dir/etc.html	失败	端口不同 ( http:// 默认端口是 80)
http://news.company.com/dir/other.html	失败	主机不同

解决办法

跨域问题的解决办法有很多，最简单的就是找到你的后端攻城狮添加一行代码即可解决。

本文章只介绍Vue中使用vue-cli提供的Node正向代理解决跨域问题，此方法只能在开发阶段使用

Node正向代理

Vue底层的webpack已经提供了相关的功能，我们只需要在vue.config.js配置文件中添加相关设置即可开启代理功能

module.exports = {
    devServer: {
        proxy: {
          '/api': {
          // target中设置需要代理的相关地址
            target: 'http://localhost:8080'
          }
        }
    }
}

根据webpack文档中的描述，对 /api 路径下的相关请求会被代理到 http://localhost:8080/api路径下