跨域及解决方法

最新推荐文章于 2024-09-04 20:18:34 发布

障碍的枫子

最新推荐文章于 2024-09-04 20:18:34 发布

阅读量185

点赞数

分类专栏： js 文章标签： javascript node.js

本文链接：https://blog.csdn.net/weixin_43822787/article/details/120381383

版权

js 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

1. 跨域是什么

跨域本质是 浏览器基于同源策略的一种基本安全手段。同源策略就是一种约定是浏览器最基本的安全功能。同源是指在同一个域（协议、主机、端口相同），当其中一项不相同时，就会产生跨域问题。

2. 解决方法

通过jsonp跨域；
document.domain+iframe跨域；
location.hash+iframe；
window.name+iframe跨域；
postMessage跨域；
跨域资源共享（CORS）；
nginx代理跨域；
nodejs中间件代理跨域；
WebSocket协议跨域。

JSONP

通过动态创建script标签，通过script标签src请求没有域限制来获取资源；在html页面中，将script标签地址改为后端接口，网页通过添加<scritp>元素，向服务器请求JSON数据，这种做法不受同源策略限制；服务器收到请求后，将数据放在在一个指定名的回调函数里传回来。
缺点： JSONP只能get请求。

原生JS实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
  <script>
    function fn(data) {
        console.log(data);
        console.log(data.msg);
    }
    </script>
  <!-- 函数的声明要放在请求之上 -->
  <script src="http://127.0.0.1:3000?callback=fn"></script>
  </body>
</html>

const http = require("http");

const hostname = "127.0.0.1";
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader("Content-Type", "text/plain");
  // 响应数据
  // 响应的数据必须是JSON格式
  // 响应的数据作为调用的函数的参数传递
  res.end('fn({"msg":"Hello world"})');
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

在这里插入图片描述
引用来自于参考

CORS"跨域资源共享"（Cross-origin resource sharing）

CORS需要浏览器和服务器同时支持才能实现跨域请求，除IE10以下的浏览器外的浏览器都支持。CORS的整个过程都由浏览器完成，前端无需做任何配置；只要服务器实现CORS接口，就可以实现跨域通信。

var express = require('express');
var app = express();
var allowCrossDomain = function (req, res, next) {
  res.header('Access-Control-Allow-Origin', 'http://localhost:3001');
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  next();
}
app.use(allowCrossDomain);

CORS详解

Nginx反向代理

nginx模拟一个虚拟服务器，因为服务器与服务器之间是不存在跨域的；
发送数据时，客户端->nginx->服务端；
返回数据时，服务端->nginx->客户端。

障碍的枫子

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
跨域及解决方法

1. 跨域是什么跨域本质是浏览器基于同源策略的一种基本安全手段。同源策略就是一种约定是浏览器最基本的安全功能。同源是指在同一个域（协议、主机、端口相同），当其中一项不相同时，就会产生跨域问题。2. 解决方法通过jsonp跨域；-document.domain+iframe跨域；-location.hash+iframe；-window.name+iframe跨域；-postMessage跨域；-跨域资源共享（CORS）；-nginx代理跨域；-nodejs中间件代理跨域；-We
复制链接

扫一扫

专栏目录