入门前端-Vue 解决跨域问题

快来打我* 2022-09-06 00:15 277阅读 0赞

# 什么是跨域 #

> 跨域俗称[跨源资源共享（CORS）][CORS]是一种基于`HTTP` 头的机制，该机制通过允许服务器标示除了它自己以外的其它`origin`（域，协议和端口），这样浏览器可以访问加载这些资源。

**跨域本质是浏览器基于同源策略的一种安全手段**

同源策略（Sameoriginpolicy），是一种约定，它是浏览器最核心也最基本的安全功能  
所谓同源（即指在同一个域）具有以下三个相同点

*  协议相同（`protocol`），如：`http`或者`https`
 *  主机相同（`host`），如：`192.168.1.1`或者`192.168.1.2`
 *  端口相同（`port`），如：`192.168.1.1:8080`或者`192.168.1.1:9527`

反之即是非同源，也就是**协议、端口、主机**其中任何一项不相同的时候，这时候就会产生跨域

> 跨域是浏览器的限制，你用抓包工具抓取接口数据，是可以看到接口已经把数据返回回来了，只是浏览器的限制，你获取不到数据。用postman请求接口能够请求到数据。这些再次印证了跨域是浏览器的限制。

# 跨域会出现什么问题 #

> 出现安全问题。因为跨域是浏览器为了安全而约定的一种同源策略。 那么会有什么安全问题？

*  `XSS（Cross-Site Scripting）`，中文名称：跨站脚本攻击。本质是攻击者在`web`页面插入恶意的`script`代码，当用户浏览该页面之时，嵌入该页面的`script`代码就会被执行，从而达到恶意攻击用户的目的。常见示例：在话题评论输入框中输入`script`代码并提交到服务器，当用户浏览该话题下的评论时会促发该`script`脚本的执行。
 *  `CSRF（Cross-site request forgery）`，中文名称：跨站请求伪造。常见的示例：你访问了`网站a`并登陆且返回了`Cookie`，这时你又去访问`网站b`，而网站b偷摸把你的`账号密码以及Cookie`记录后。如果没有同源机制，`网站b`就可以伪造你的身份信息去登陆`网站a`，并做些违法的操作。

参考：[前端安全系列（一）：如何防止XSS攻击？][XSS]  
参考：[不要再问我跨域的问题了][Link 1]

# 为什么要解决跨域问题 #

在前后端分离开发过程中常常出现下面这样的错误提示：

Access to XMLHttpRequest at 'http://localhost:8000/apis/users/info/' 
    from origin 'http://localhost:8080' has been blocked by CORS policy: 
    Response to preflight request doesn't pass access control 
    check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

这就是跨域导致的问题。在开发阶段如果不解决跨域问题，那基本上是没法实现前后端分离开发的。  
因此为了提高效率，我们需要解决跨域问题。

# 如何解决跨域问题 #

## CORS ##

`CORS` 需要浏览器和后端同时支持。浏览器会自动进行`CORS` 通信，后台服务端设置`Access-Control-Allow-Origin` 就可以开启 `CORS`。 该属性表示哪些域名可以访问资源，如果设置通配符(`*`)则表示所有网站都可以访问资源。

虽然后台设置通配符`（*）`即可解决所有跨域问题，但是这也会导致网站丢失了同源机制使得网站不安全，更靠谱的方法是后台开发设置白名单，仅允许可靠的地址访问。

有时候后台开发不想解决跨域问题，那只能前端儿自己动手了，`Vue CLI` 提供了`proxy`相关的配置。

## proxy ##

> 参考：[Vue CLI 配置参考][Vue CLI]

// vue.config.js
    module.exports = { 
      devServer: { 
        proxy: { 
          '/api': { 
            target: 'http://www.google.com/device/all',
            ws: true,
            changeOrigin: true
          },
          '/foo': { 
            target: 'http://www.baidu.com/foo/info'
          }
        }
      }
    }

示例：

当我们请求下面的接口：

http://192.168.1.1:8080/api/device/all
    http://192.168.1.1:8080/foo/info

实际上会走代理，所有实际调用的接口是下面这个：

http://www.google.com/device/all
    http://www.baidu.com/foo/info

这样就通过代理的方式解决了跨域问题。

[CORS]: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS
[XSS]: https://tech.meituan.com/2018/09/27/fe-security.html
[Link 1]: https://segmentfault.com/a/1190000015597029
[Vue CLI]: https://cli.vuejs.org/zh/config/#devserver-proxy