【跨域的常见的三种解决方案】

WangTao-xz

已于 2022-05-28 15:17:54 修改

阅读量927

点赞数 3

分类专栏：学习文章标签：开发语言 javascript

于 2022-05-28 15:14:09 首次发布

本文链接：https://blog.csdn.net/WangTao1_/article/details/125017789

版权

学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

在A地址（发起请求的页面地址）向B地址（要请求的目标页面地址）发起请求时，

如果A地址和B地址在：协议域名端口不全相同，则说明请求是跨域的；

跨域请求是非常常见的现象！

一、跨域是什么？

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

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

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

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

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

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

二、如何解决

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

JSONP
CORS
Proxy

而在vue项目中，我们主要针对CORS或Proxy这两种方案进行展开,JSONP简单了解一下,不推荐使用。

1.JSONP

原理 : 动态的创建script标签,给script标签添加src属性,并追加到页面上发送请求.但是动态创建script标签发送请求是异步的.所以需要在页面上声明函数,从服务器端返回函数调用.

//以下是推导的过程
<!-- 1.script中的src属性 天然的就有去第三方的服务器要数据的能力.数据已经回来了 -->
<script src="http://localhost:3000/a.js"></script>

<!-- 2.script中的src属性 可以要数据. 但是可以不可以传参呢? 可以 -->
<script src="http://localhost:3000/get?id=1"></script>

<!-- 3.可以不可以动态的传参 ? 不可以 -->
<script src="http://localhost:3000/get?id=num"></script> 

<script>
    // 4.可以在js代码中写变量
    // 动态的创建script是"异步"的

    // 这个地方有一个技巧,从服务器端返回的是 "函数调用"
    function abc(data){
        alert(data);
    }

    var num = "hello"
    var script = document.createElement("script");
    script.src = "http://192.168.69.229:3000/get?callback=abc&id="+num
    document.body.appendChild(script)

</script>

2.CORS

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

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

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

以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

3.Proxy

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

跨域-Vue-Cli配置代理转发

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

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

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

module.exports = {
  devServer: {
    // ... 省略
    // 代理配置
    proxy: {
        // 如果请求地址以/api打头,就出触发代理机制
        // http://localhost:9588/api/login -> http://localhost:3000/api/login
        '/api': {
          target: 'http://localhost:3000' // 我们要代理的真实接口地址
        }
      }
    }
  }
}

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