面试官：跨域是什么？Vue项目中你是如何解决跨域的呢？

墨蓝 2023-01-02 13:24 214阅读 0赞

![format_png][]

## 一、跨域是什么    ##

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

同源策略（Sameoriginpolicy），是一种约定，它是浏览器最核心也最基本的安全功能

所谓同源（即指在同一个域）具有以下三个相同点

*  协议相同（protocol）
 *  主机相同（host）
 *  端口相同（port）

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

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

## 二、如何解决 ##

解决跨域的方法有很多，下面列举了三种：

*  JSONP
 *  CORS
 *  Proxy

而在`vue`项目中，我们主要针对`CORS`或`Proxy`这两种方案进行展开

### CORS ###

CORS （Cross-Origin Resource Sharing，跨域资源共享）是一个系统，它由一系列传输的HTTP头组成，这些HTTP头决定浏览器是否阻止前端 JavaScript 代码获取跨域请求的响应

`CORS` 实现起来非常方便，只需要增加一些 `HTTP` 头，让服务器能声明允许的访问来源

只要后端实现了 `CORS`，就实现了跨域

![format_png 1][]

以`koa`框架举例

添加中间件，直接设置`Access-Control-Allow-Origin`请求头

app.use(async (ctx, next)=> {
      ctx.set('Access-Control-Allow-Origin', '*');
      ctx.set('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
      ctx.set('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
      if (ctx.method == 'OPTIONS') {
        ctx.body = 200; 
      } else {
        await next();
      }
    })

ps: `Access-Control-Allow-Origin` 设置为\*其实意义不大，可以说是形同虚设，实际应用中，上线前我们会将`Access-Control-Allow-Origin` 值设为我们目标`host`

### Proxy ###

代理（Proxy）也称网络代理，是一种特殊的网络服务，允许一个（一般为客户端）通过这个服务与另一个网络终端（一般为服务器）进行非直接的连接。一些网关、路由器等网络设备具备网络代理功能。一般认为代理服务有利于保障网络终端的隐私或安全，防止攻击

**方案一**

如果是通过`vue-cli`脚手架工具搭建项目，我们可以通过`webpack`为我们起一个本地服务器作为请求的代理对象

通过该服务器转发请求至目标服务器，得到结果再转发给前端，但是最终发布上线时如果web应用和接口服务器不在一起仍会跨域

在`vue.config.js`文件，新增以下代码

amodule.exports = {
        devServer: {
            host: '127.0.0.1',
            port: 8084,
            open: true,// vue项目启动时自动打开浏览器
            proxy: {
                '/api': { // '/api'是代理标识，用于告诉node，url前面是/api的就是使用代理的
                    target: "http://xxx.xxx.xx.xx:8080", //目标地址，一般是指后台服务器地址
                    changeOrigin: true, //是否跨域
                    pathRewrite: { // pathRewrite 的作用是把实际Request Url中的'/api'用""代替
                        '^/api': "" 
                    }
                }
            }
        }
    }

通过`axios`发送请求中，配置请求的根路径

axios.defaults.baseURL = '/api'

**方案二**

此外，还可通过服务端实现代理请求转发

以`express`框架为例

var express = require('express');
    const proxy = require('http-proxy-middleware')
    const app = express()
    app.use(express.static(__dirname + '/'))
    app.use('/api', proxy({ target: 'http://localhost:4000', changeOrigin: false
                          }));
    module.exports = app

**方案三**

通过配置`nginx`实现代理

server {
        listen    80;
        # server_name xxx.xxx.com;
        location / {
            root  /var/www/html;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
        location /api {
            proxy_pass  http://127.0.0.1:3000;
            proxy_redirect   off;
            proxy_set_header  Host       $host;
            proxy_set_header  X-Real-IP     $remote_addr;
            proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;
        }
    }

面试官VUE系列总进度：29／33

[面试官：Vue常用的修饰符有哪些?有什么应用场景?][Vue]

[面试官：你有写过自定义指令吗？自定义指令的应用场景有哪些？][Link 1]

[面试官：什么是虚拟DOM？如何实现一个虚拟DOM？][DOM_DOM]

[面试官：了解过vue中的diff算法吗？说说看][vue_diff]

[面试官：Vue项目中有封装过axios吗？怎么封装的？][Vue_axios]

[面试官：你了解Axios的原理吗？有看过它的源码吗？][Axios]

[面试官：SSR解决了什么问题？有做过SSR吗？你是怎么做的？][SSR_SSR]

[面试官：说下你的vue项目的目录结构，如果是大型项目你该怎么划分结构和划分组件呢？][vue]

[面试官：Vue要做权限管理该怎么做？控制到按钮级别的权限怎么做？][Vue 1]

篇副有限，扫下方二维码查看往期

![format_png 2][]

[format_png]: /images/20221119/efec0449a85e472cb56dfa85957104d2.png
[format_png 1]: /images/20221119/98cd45da7e904a7089ab4c7ab98ed5ac.png
[Vue]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c663cb674f756a3f270d8e017dd7a773a5933afa35f11356fe42b67afe836003207851d6&idx=1&mid=2247484469&scene=21&sn=921d55282359ac4a16c077bbe5946628#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c614cb674f02345c0fbb44bc26dcacead59259d8a539fcbba4581d8e94783e9c5ac06b7d&idx=1&mid=2247484482&scene=21&sn=9558721c92f56261200fcee26d86dbe1#wechat_redirect
[DOM_DOM]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c632cb674f2484fdf914d76fba55afcefca3b5adcbe6cf4b0c7fd36e29d0292e8cefceb5&idx=1&mid=2247484516&scene=21&sn=965a4ce32bf93adb9ed112922c5cb8f5#wechat_redirect
[vue_diff]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c623cb674f35ef6e46d8a2aa70d524ee3a4ae005bf6e77008c3ce2510dcdb4d7bbde2667&idx=1&mid=2247484533&scene=21&sn=0b21d608fa46145c5118e22fc33a5bcf#wechat_redirect
[Vue_axios]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c6decb674fc8aed35ee8254fe7f8cfc398648fa643039b29e3f6dda7caf17ff83df2f28a&idx=1&mid=2247484552&scene=21&sn=e847305e8330a6817e8800820774e78b#wechat_redirect
[Axios]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c6f4cb674fe2c90b960392c402fa2452e62bcdf0a703a9ad56d454e7643dfd2b44e38391&idx=1&mid=2247484578&scene=21&sn=52ea1909abe13d6d7764384455b2e925#wechat_redirect
[SSR_SSR]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c6ebcb674ffd46b20d29b32f156e7cb8acb2c54ade0ed206b7ed887f6474a55849858ad4&idx=1&mid=2247484605&scene=21&sn=92e2e45cbba021fe685f0f8252ffe8b4#wechat_redirect
[vue]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c682cb674f94dff89689298aa5390e6484c45bc765288189528cf148606e2feb17c467f4&idx=1&mid=2247484628&scene=21&sn=43953745061afc65ed51f074b28679c5#wechat_redirect
[Vue 1]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c6b4cb674fa2c30d5640b0328d6a9fc5392d8246683508fab849ab2802e22998d6de0db5&idx=1&mid=2247484642&scene=21&sn=f38d2fdd9c89526dd415f15fa3289380#wechat_redirect
[format_png 2]: /images/20221119/d7af0e6537104a01aa92cd076b6d4a54.png