前端怎么实现跨域请求_代码007(未授权)

本文介绍: 同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSSCSRF等攻击。所谓同源是指”协议+域名+端口“三者相同，即便两个不同的域名指向同一个 ip 地址，也非同源。Co ok ie、Lo calStorag e、Ind exe dDB 等存储性内容DOM 节点AJAX 请求发送后，结果被浏览器拦截了。

同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSRF等攻击。所谓同源是指”协议+域名+端口“三者相同，即便两个不同的域名指向同一个 ip 地址，也非同源。

同源策略限制内容有：

但是有三个标签是允许跨域加载资源：

当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。不同域之间相互请求资源，就算作“跨域”。

特别说明两点：

跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。你可能会疑问明明通过表单的方式可以发起跨域请求，为什么 Aja x 就不会?因为归根结底，跨域是为了阻止用户读取到另一个域名下的内容，Aja x 可以获取响应，浏览器认为这不安全，所以拦截了响应。但是表单并不会获取新的内容，所以可以发起跨域请求。同时也说明了跨域并不能完全阻止 CSRF，因为请求毕竟是发出去了。

const xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 &amp;&amp; xhr.status === 200) {
    console.log('收到数据：', xhr.responseText);
  }
};
xhr.open('GET', 'http://example.com/data.json', true);
xhr.send();

Access-Control-Allow-Origin: http://yourdomain.com
Access-Control-Allow-Credentials: true

Access-Control-Max-Age: Number // 数字 单位是秒

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JSONP 示例</title>
  </head>
  <body>
    <script>
      function jsonpCallback(data) {
        console.log('收到数据：', data);
      }
      const url = 'http://example.com/data.json?callback=jsonpCallback';
      const script = document.createElement('script');
      script.src = url;
      document.body.appendChild(script);
    </script>
  </body>
</html>

const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 &amp;&amp; xhr.status === 200) {
    console.log('收到数据：', xhr.responseText);
  }
};
xhr.open('GET', '/proxy?url=http://example.com/data.json', true);
xhr.send();

const socket = new WebSocket('ws://example.com/ws');
socket.onopen = function() {
  console.log('连接已建立');
  socket.send('你好，服务器！');
};
socket.onmessage = function(event) {
  console.log('收到消息：', event.data);
};
socket.onerror = function(event) {
  console.log('发生错误：', event);
};

const WebSocketServer = require('ws').Server;
const wss = new WebSocketServer({ port: 8080 });
wss.on('connection', function(ws) {
  console.log('连接已建立');
  ws.on('message', function(message) {
    console.log('收到消息：', message);
    ws.send('你好，客户端！');
  });
});

// 发送消息
const targetWindow = window.opener; // 获取目标窗口的引用
const message = 'Hello, world!';
const targetOrigin = 'http://example.com'; // 目标窗口的源
targetWindow.postMessage(message, targetOrigin);

// 接收消息
window.addEventListener('message', function(event) {
  if (event.origin === 'http://example.com') {
    const message = event.data;
    console.log('收到消息：', message);
    // 处理接收到的消息
  }
});

const xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.open('GET', 'http://example.com/api', true);
xhr.send();

显示所有内容

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

同源浏览器跨域

什么是跨域

1.什么是同源 策略及其限制 内容？

2.常见 跨域 场景

跨域有哪些 方案？

1.CORS

简单请求

非简单请求

2.JSONP

3.代理

4.WebSoc ket

5.postMessage

跨域时 Cookie 要做何处理？

发表回复取消回复

什么是跨域

1.什么是同源策略及其限制内容？

2.常见跨域场景

跨域有哪些方案？