
一、跨域请求痛点最近网站新增了一个域名B用于分离不同的功能 。 但是需要复用服务器的高防等服务 , 但是服务和原有域名A绑定 , 所以新域名B需要直接去调用域名A 。
一开始想使用CNAME的方式 , 让B直接指向A 。 但是Https支持性有点问题 , 需要多域名证书 。 也考虑过反向代理 , 但是代理服务器的性能和高防等又是一个问题 。
最终决定在域名B的网页中 , 所有请求都直接去调用域名A的接口 。 于是就遇到了跨域请求的问题 。
二、跨域请求的实现方式网上找了许多资料来实现跨域请求 。 最终预估下来 , 有两种方案比较靠谱:通过iframe实现和CORS方案
三、通过iframe实现初步设想是加载一个域名A的iframe页面 , 然后通过postMessage将所有Ajax请求 , 转发给这个页面 , 通过这个页面来进行请求 , 最终将结果通过postMessage回发给外层的域名B页面 。
【奈飞|Ajax跨域请求的两种实现方式】于是开始实现:
前端使用的是React , 所以实现了一个FrameHttp.js专门用法封装ajax调用 。 调用FrameHttp.ajax将所有外部Jquery请求转发给iframe中域名A的/util/ajaxrequest页面 。
import Tools from \"../Tools\"
const FrameHttpCmd = {
INIT: 1
REQUEST: 2
REQUEST_CALLBACK: 3
class FrameHttp {
static isInit = false
static _request_buffer = [
static frame = null
static message_key = 0
static message_key_max = 10000000
static request_map = {
static init(domain) {
var the_frame = document.createElement('iframe')
let url_obj = new URL(domain)
url_obj.pathname = Tools.getUrl('/util/ajaxrequest')
the_frame.src = url_obj.toString()
the_frame.style.visibility = 'hidden'
the_frame.style.position = 'absolute'
the_frame.style.width = 0
the_frame.style.height = 0
FrameHttp.frame = the_frame
document.body.appendChild(the_frame)
window.addEventListener('message' this.onMessage)
static _initFrame() {
FrameHttp.isInit = true
console.log('(INFO)FrameHttp._initFrame')
for (let i = 0; i < FrameHttp._request_buffer.length; i++) {
let arg = FrameHttp._request_buffer[i
FrameHttp.ajax(arg)
FrameHttp._request_buffer = [
- 电视剧|这小众网站太厉害了!囊括爱优腾+奈飞海量资源,不用会员免费看
- iOS16将支持清洁能源充电,每日优鲜回应用户余额清零,奈飞与育碧合作,外交部回应美计划扩大芯片限制,这就是今天的其它大新闻!
- 马斯克暗示可能自建社交平台;迪士尼订阅用户总数首超奈飞;小米发布全尺寸人形机器人,成本每台六、七十万|极客早知道
- 广告|业内标杆沦陷了!奈飞拟推出广告投放业务:天价收费标准
- Spotify再一次躲开了奈飞面临的困境|财报观察
- 奈飞共享账号行不通了!官方开始行动:明年打击共享用户
- 流媒体|奈飞向广告低头了,但长视频的底层逻辑没变
- 短视频|奈飞的长期困境难解
- 流媒体|计研报告丨引入广告才是王道?奈飞加入爱优腾大军
- 流媒体|奈飞共享账号行不通了!官方开始行动:明年打击共享用户
