跨域相关问题

最新推荐文章于 2023-08-29 21:56:20 发布

你过来啊zzz

最新推荐文章于 2023-08-29 21:56:20 发布

阅读量135

点赞数

文章标签： java ajax javascript js node.js

本文链接：https://blog.csdn.net/Depressione/article/details/108433505

版权

同源策略

同源策略的目的是为了保护用户的隐私数据，防止恶意网站窃取数据。所谓同源策略必须协议相同，域名相同，端口号相同。如果非同源，共会受到行为限制：

Cookie、LocalStorage和ndexDB无法读取
DOM无法获得
AJAX请求不能发送

跨域是什么

当一个资源从与该资源本身所在的服务器不同的域或端口请求一个资源时，资源会发起一个跨域HTTP请求。出于安全原因，浏览器限制从脚本内发起的跨院HTTP请求。例如XMLHTTPRequest和FetchAPI遵循同源策略。这意味着使用这些API的Web应用程序只能从加载应用程序的同一个域请求HTTP资源。

访问的URL地址：网络协议+域名（IP地址）+端口号+资源路径

同源：协议相同，域名相同，端口号相同
不同源：
- 域名不相同：完全跨域
- 域名相同，端口号不同：跨子域

创建跨域

link元素
script元素
img元素
iframe元素

JSONP

JSONP是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。利用

script元素实现

网页通过添加一个<script>元素，向服务器请求JSON数据，这种做法不受同源政策限制；服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。

在这里插入图片描述

可以理解成请求时把自己的函数名也发送过去，服务器端接收到请求，把该响应的数据通过得到函数来调用一下响应回去，这样客户端就能通过函数的参数形式得到服务器端响应过来的数据。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>scrpit实现跨域</title>
</head>

<body>

</body>
<!--
    通过script元素来实现JSONP跨域访问
        利用里面的src属性来指定服务器端地址
        同时将指定的回调函数名称发送给指定的服务器
-->
<script>
    //  定义发送给服务器端的回调函数
    //利用回调函数的参数进行接收
    function fn(data) {
        console.log(data);
    }
</script>
<script src="http://127.0.0.1:3000?callback=fn"></script>


</html>

const http = require('http');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer(function (req, res) {
    res.statusCode = 200;
    res.setHeader('Content-Type', 'text/plain');
    //向发送请求的html页面发送响应
    //1.响应数据的格式必须要符合json格式的数据
    //2.将响应数据放置在回调函数中才能传递回去
    res.end('fn({"msg":"hellw world"})');
});

server.listen(port, hostname, function () {
    console.log('服务器开启成功！');
});

$.getJSON()方法

jQuery中的$.getJSON()方法允许通过使用JSONP形式的回调函数来加载其他网域的JSON数据。

$.getJSON('http://127.0.0.1:3000?callback=?',function(data){
	console.log(data)
})

注意：$.getJSON()方法的第一个参数表示url,需要在该参数后面添加“callback=?”。jQUery将"?"自动替换为正确的函数名，以执行回调函数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>getJSON实现跨域访问</title>
</head>

<body>

</body>
<script src="../3.JQuery中的Ajax/jquery-3.5.1.js"></script>
<script>
    $.getJSON('http://127.0.0.1:3000?callback=?', function (data) {
        console.log(data);
    })
</script>

</html>

const http = require('http');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer(function (req, res) {
    var url = req.url;
    var urlObj = require('url').parse(url);
    var functionName = urlObj.query.split('&')[0].split('=')[1];
    res.statusCode = 200;
    res.setHeader('Content-Type', 'text/plain');
    //向发送请求的html页面发送响应
    //1.响应数据的格式必须要符合json格式的数据
    //2.将响应数据放置在回调函数中才能传递回去
    res.end(functionName + '({"msg":"hellw world"})');
});

server.listen(port, hostname, function () {
    console.log('服务器开启成功！');
});

jQuery会自动生成回调函数的名称。

你过来啊zzz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
跨域相关问题

同源策略同源策略的目的是为了保护用户的隐私数据，防止恶意网站窃取数据。所谓同源策略必须协议相同，域名相同，端口号相同。如果非同源，共会受到行为限制：Cookie、LocalStorage和ndexDB无法读取DOM无法获得AJAX请求不能发送跨域是什么当一个资源从与该资源本身所在的服务器不同的域或端口请求一个资源时，资源会发起一个跨域HTTP请求。出于安全原因，浏览器限制从脚本内发起的跨院HTTP请求。例如XMLHTTPRequest和FetchAPI遵循同源策略。这意味着使用这些API的
复制链接

扫一扫