js跨域问题及解决方法汇总

// 获取返回结果
function callback(resp){
    console.log(resp);
}

// 向服务端请求js文件
function request(url){
    // 生成一个 script 标签
    const script = document.createElement('script')
    // 标签引用 js 路径为填入路径
    script.src = url
    // 标签解析完成之后删除
    script.onload = function(){
        script.remove()
    }
    // 插入 body 中
    document.body.appendChild(script)
}

Ngin x 代理跨域

差别

cors：需要服务器设置响应头

jsonp：需要服务器响应一段js 代码，并且还要调用函数

方法

浏览器请求自己的服务器 proxy

代理服务器请求目标服务器 target

服务器之间没有跨域问题，目标服务器响应代理服务器

代理服务器返回数据

// 引入库
const express = require('express')
// 创建服务器
const app = express()
// 接受对路径 /hero 的 GET 请求
app.get('/hero',async (req,res)=&gt;{
    // 使用 cors 解决对代理服务器的跨域
    res.header('assess-control-allow-origin','*')
    // 响应一段测试文本
    res.send('你好，我是代理服务器')
    // 在这里请求目标服务器，然后返回给前端
})
// 监听9527端口
app.listen(9527,()=&gt;{
    console.log('服务器已启动');
})

扩展 学习

No de 中间件 代理跨域

Vue 项目一般使用此方法，就是对代理服务器的一种封装。

在vue.config.js 文件中配置

module.export = {
    ...
    devServer: {
        proxy: {
            [ process.env.VUE_APP_BASE_API ]: {
                target: 'http://xxxx',    // 代理跨域目标接口
                ws: true,
                changeOrigin: true,
                pathRewrite: {
                    [ '^' + process.env.VUE_APP_BASE_API ] : ''
                }
            }
        }
    }

No de/Ex pre ss中配置：

const express = require('express')
const proxy = require('http-proxy-middleware')
const app = express()
app.use('/', proxy({ 
    // 代理跨域目标接口 
    target: 'http:    // xxxx:8080', 
    changeOrigin: true, 
    // 修改响应头信息，实现跨域并允许带cookie 
    onProxyRes: function(proxyRes, req, res) { 
        res.header('Access-Control-Allow-Origin', 'http://xxxx')
        res.header('Access-Control-Allow-Credentials', 'true')
    }, 
    // 修改响应信息中的cookie域名 
    cookieDomainRewrite: 'www.domain1.com'     // 可以为false，表示不修改
})); 
app.listen(3000);

Web socket

WebSoc ket是HTML5标准中的一种基于TCP但是区别于HTTP的通信协议，因为是长连接，该协议不实行同源政策。以ws://(非加密)和wss://(加密)作为协议前缀。

因为WebSoc ket请求头信息中有Ori g in 字段，表示请求源来自哪个域，服务器可以根据这个字段判断是否允许本次通信。

// 创建websocket
var socket = new WebSocket('ws://www.baidu.com');
// 发送消息
socket.send('hello WebSocket');
// 接收消息
socket.onmessage = function(event){
    var data = event.data;
}

postMessa ge

是HTML5引入的一个全新的API：跨文档通信 API（Cross–docu ment messaging）。这个API为window 对象新增了一个 window.postMessage方法，允许跨窗口通信，不论这两个窗口是否同源。

窗口 之间 传递 消息

// 父窗口发起
window.opener.postMessage("我是来自a页面的","http://b.com")

// 子窗口接收
window.onmessage = function(e){
    e = e || event;
    console.log(e.data);//我是来自a页面的
}
// 子窗口发送
window.opener.postMessage('我是来自b页面的', 'http://a.com');

读取其他窗口LocalStorage

// 父窗口调用方法
var obj = { name: 'Jack' };
// 存入对象
window.parent.postMessage(JSON.stringify({key: 'storage', method: 'set', data: obj}), 'http://b.com');
// 读取对象
window.parent.postMessage(JSON.stringify({key: 'storage', method: "get"}), "*");
window.onmessage = function(e) {
    // 判断消息是否来自a窗口
    if (e.origin != 'http://a.com') return;
    // "Jack"
    console.log(JSON.parse(e.data).name);
}

b窗口接收消息，获取自己的localStorage之后再传递给a窗口

window.onmessage = function(e) {
  // 消息来自自己，不予理会
  if (e.origin !== 'http://b.com') return;
  var payload = JSON.parse(e.data);
  // 判断方法进行操作
  switch (payload.method) {
    case 'set':
      localStorage.setItem(payload.key, JSON.stringify(payload.data));
      break;
    case 'get':
      var parent = window.parent;
      var data = localStorage.getItem(payload.key);
      // 如果是获取，获取之后传递给a窗口
      parent.postMessage(data, 'http://a.com');
      break;
    case 'remove':
      localStorage.removeItem(payload.key);
      break;
  }
}