后端接口不能跨域？proxy代理轻松解决跨域问题

一，解决跨域问题之前，首先要知道什么是跨域

1.跨域： 浏览器使用 ajax时，如果请求了的接口地址url 和 当前打开的页面(即跳转的页面) 地址 不同源称之为跨域。
2.注意：
(1)ajax: 浏览器只有使用ajax发送请求才会出现跨域。 href属性与src属性等不会出现跨域。
(2)接口地址url: ajax请求的url地址（协议 、 主机 、 端口）
(3)不同源: 首先同源是指：如果两个 URL 的 protocol、port (en-US) (如果有指定的话) 和 host 都相同的话，则这两个 URL 是同源。这个方案也被称为“协议/主机/端口元组”，或者直接是“元组”。这是官方的定义。
不同源就是指：两个url地址（当前浏览器页面和打开的页面），协议 主机 端口任何一个不一致。
如下表是官方给出了与 URL http://store.company.com/dir/page.html 的源进行对比的示例：

二，如何解决跨域问题

1.后端CORS解决跨域 其实跨域问题的解决办法有很多，最简单的解决方式就是找到你的后端兄弟利用CORS在对应后端接口的响应头中设置一个允许的header。

2.通过Vue中的proxy代理轻松解决跨域问题
(1).解决跨域问题的原理： 上文中我们知道，跨域只有在浏览器使用ajax发送请求才会出现。服务器和服务器之间不会存在跨域问题。生成代理服务器后，就不会存在跨域问题了。
(2)如何实现： Vue底层的webpack提供了proxy代理功能，我们只需要在vue.config.js配置文件中的devServer下添加如下配置，开启代理功能，就可轻松解决跨域问题

module.exports = {
//注意是在devServer中配置代理
  devServer: {
    // 代理配置
    proxy: {
      '/api': {
        target: 'http://xxxx.xxx' // 配置接口服务器地址
      }
    }
  }