js跨域及解决方案 #1

FIGHTING-TOP · 2020-10-22T08:52:01Z

什么是跨域请求

当前发起请求的域与该请求指向的资源（该请求所在的页面）所在的域不一样。

此时该请求就会受到浏览器SOP（同源策略）的限制，这样做可以降低被CSRF（跨站请求伪造）攻击的可能，但是同源策略并不能避免CSRF。对CSRF感兴趣的可以戳这里了解更多。

这里的域指的是这样的一个概念：我们认为若协议 + 域名 + 端口号均相同，那么就是同域。

如何解决ajax跨域

JSONP
CORS
nodejs正向代理请求服务端不跨域
nginx反向代理代理请求
img标签
websocket

（一）JSONP方式解决跨域问题

JSONP解决跨域问题是一个比较古老的方案(实际中不推荐使用),这里做简单介绍(实际项目中如果要使用JSONP，一般会使用 JQuery 等对JSONP进行了封装的类库来进行ajax请求)

实现原理

JSONP之所以能够用来解决跨域方案,主要是因为 <script> 脚本拥有跨域能力,而JSONP正是利用这一点来实现。

当我们用一个 script 的 src 来请求一个接口时，这个接口返回了一个函数名和一个或一些参数，由于是 script 引入的，所以浏览器就直接给我们执行了，注意在这之前我们必须先注册好接口返回的方法。

实现流程

JSONP的实现步骤大致如下

客户端网页网页通过添加一个 <script> 元素，向服务器请求JSON数据，这种做法不受同源政策限制

function addScriptTag(src) {
  var script = document.createElement('script');
  script.setAttribute("type","text/javascript");
  script.src = src;
  document.body.appendChild(script);
}

window.onload = function () {
  addScriptTag('http://example.com/ip?callback=foo');
}

function foo(data) {
  console.log('response data: ' + JSON.stringify(data));
};

请求时,接口地址是作为构建出的脚本标签的 src 的,这样,当脚本标签构建出来时,最终的 src 是接口返回的内容

服务端对应的接口在返回参数外面添加函数包裹层

foo({
  "test": "testData"
});

由于 <script> 元素请求的脚本，直接作为代码运行。这时，只要浏览器定义了 foo 函数，该函数就会立即调用。作为参数的JSON数据被视为 JavaScript 对象，而不是字符串，因此避免了使用 JSON.parse 的步骤。
注意,一般的JSONP接口和普通接口返回数据是有区别的,所以接口如果要做JSONP兼容,需要进行判断是否有对应 callback 关键字参数,如果有则是JSONP请求,返回JSONP数据,否则返回普通数据

使用注意

基于JSONP的实现原理,所以JSONP只能是“GET”请求,不能进行较为复杂的POST和其它请求,所以遇到那种情况,就得参考下面的CORS解决跨域了

（二）CORS解决跨域问题

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

同源安全策略默认阻止“跨域”获取资源。但是 CORS 给了web服务器这样的权限，即服务器可以选择，允许跨域请求访问到它们的资源。

他允许我们设置一些请求头信息来解决跨域：

Access-Control-Allow-Origin // 指示请求的资源能共享给哪些域。

Access-Control-Allow-Credentials // 指示当请求的凭证标记为 true 时，是否响应该请求。

Access-Control-Allow-Headers // 用在对预请求的响应中，指示实际的请求中可以使用哪些 HTTP 头。

Access-Control-Allow-Methods // 指定对预请求的响应中，哪些 HTTP 方法允许访问请求的资源。

Access-Control-Expose-Headers // 指示哪些 HTTP 头的名称能在响应中列出。

Access-Control-Max-Age // 指示预请求的结果能被缓存多久。

Access-Control-Request-Headers // 用于发起一个预请求，告知服务器正式请求会使用那些 HTTP 头。

Access-Control-Request-Method // 用于发起一个预请求，告知服务器正式请求会使用哪一种 HTTP 请求方法。

Origin  // 指示获取资源的请求是从什么域发起的。

另外，规范要求，对那些可能对服务器数据产生副作用的 HTTP 请求方法（特别是 GET 以外的 HTTP 请求，或者搭配某些 MIME 类型的 POST 请求），浏览器必须首先使用 OPTIONS 方法发起一个 预检请求（preflight request），从而获知服务端是否允许该跨源请求。服务器确认允许之后，才发起实际的 HTTP 请求

在预检请求的返回中，服务器端也可以通知客户端，是否需要携带身份凭证（包括 Cookies 和 HTTP 认证相关数据）。

CORS请求失败会产生错误，但是为了安全，在JavaScript代码层面是无法获知到底具体是哪里出了问题。你只能查看浏览器的控制台以得知具体是哪里出现了错误。

然而并非所有的请求都会有预检请求，详细资料可以阅读MDN文档介绍的跨源资源共享（CORS）。

（三）代理请求方式解决接口跨域问题

注意，由于接口代理是有代价的，所以这个一般仅是开发过程中使用。

与前面的方法不同，前面 CORS 是后端解决，而这个主要是前端对接口进行代理，也就是:

前端ajax请求的是本地接口
本地接口接收到请求后向实际的接口请求数据，然后再将信息返回给前端
一般用 nodejs 即可代理
关于如何实现代理，方法有很多，那么我们开发一般会用 webpack-dev-server，

假如我们服务在 localhost:3000 上，你可以这样启用代理：

webpack.config.js

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        pathRewrite: {'^/' : ''}
      }
    }
  }
};

请求到 /api/users 现在会被代理到请求 http://localhost:3000/api/users。

如果你不想始终传递 /api ，则需要重写路径：

webpack.config.js

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        pathRewrite: {'^/api' : ''}
      }
    }
  }
};

这种代理的方式呢，其实是用 http-proxy-middleware 来实现的，有兴趣的可以看下源码了解下，有机会可以专门聊下这个

（四）图片Ping

我们知道，一个网页可以从任何网页加载图像，不用担心跨域不跨域，所以，我们就可以利用图片不受“同源限制”这一点进行跨域通信。

我们利用JS创建一个新的Image对象，并把src属性设置为指向请求的地址，通过监听 onload 和 onerror 事件来确定是否接受到了响应。响应的数据可以是任意内容，但通常是像素图或304响应。

需要注意的是，新图像元素只要设置了src属性就会开始下载，所以我们这里的事件一定要在指定src属性之前绑定，这也是为什么我们这里不需要把img标签插入DOM 的原因。

<body>
    <button id="Ping">图像Ping发送请求</button>
    <script>
        var btn=document.getElementById('Ping');
        btn.onclick=function () {
            var img=new Image();
            img.onload=img.onerror=function () {
                alert("Done");
            };
            img.src="http://localhost:8081/img?name=Joy";
        }
    </script>
</body>

//服务器代码
app.get('/img',function (req,res) {
   res.send("我是一张图片");
});

这种方式优点是很明显的：兼容性非常好，缺点就是：只能发生GET请求，而且无法获取响应文本。

（五）WebSocket

WebSockets 是一种先进的技术。它可以在用户的浏览器和服务器之间打开交互式通信会话。使用此API，您可以向服务器发送消息并接收事件驱动的响应，而无需通过轮询服务器的方式以获得响应。

它默认是可以跨域的。

// Create WebSocket connection.
const socket = new WebSocket('ws://localhost:8080');

// Connection opened
socket.addEventListener('open', function (event) {
    socket.send('Hello Server!');
});

// Listen for messages
socket.addEventListener('message', function (event) {
    console.log('Message from server ', event.data);
});

对于前端页面之间的跨域

如果是iframe可以使用 location.hash 或 window.name 进行信息交流
使用 postMessage
document.domain（仅限于一级域名和二级域名之间）

欢迎关注我个人公众号
爱折腾的王先生

The text was updated successfully, but these errors were encountered:

FIGHTING-TOP changed the title ~~js跨域解读~~ js跨域及解决方案 Oct 22, 2020

FIGHTING-TOP self-assigned this Oct 22, 2020

FIGHTING-TOP added documentation Improvements or additions to documentation 跨域 js跨域及解决方案 and removed documentation Improvements or additions to documentation labels Oct 22, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

js跨域及解决方案 #1

js跨域及解决方案 #1

FIGHTING-TOP commented Oct 22, 2020 •

edited

Loading

js跨域及解决方案 #1

js跨域及解决方案 #1

Comments

FIGHTING-TOP commented Oct 22, 2020 • edited Loading

什么是跨域请求

如何解决ajax跨域

（一）JSONP方式解决跨域问题

实现原理

实现流程

使用注意

（二）CORS解决跨域问题

（三）代理请求方式解决接口跨域问题

（四）图片Ping

（五）WebSocket

对于前端页面之间的跨域

FIGHTING-TOP commented Oct 22, 2020 •

edited

Loading