AJAX-跨域请求

最新推荐文章于 2023-10-19 11:42:02 发布

VIP文章 weixin_34220179

最新推荐文章于 2023-10-19 11:42:02 发布

阅读量418

点赞数

文章标签： javascript 后端前端 ViewUI

原文链接：https://yq.aliyun.com/articles/605559

版权

1、什么是跨域请求

浏览器均默认开启了同源策略，它指Ajax请求所在的页面和被请求的页面在域名、端口均相同才能被访问，否则会提示如下错误：

XMLHttpRequest cannot load xxxxxxx is not allowed by 
Access-Control-Allow-Origin.

2、JSONP解决方案

2.1 JSONP原理

JSONP 不是真正的AJAX请求，是利用script的src可可以跨域的特性，动态加载一段script脚本，脚本中包含需要的信息。

2.2 基础代码实现

html源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jsonp跨域</title>
    <script type="text/javascript">
        function callbak(rs){
            alert(rs.data);
        }
    </script>
    <script src="http://127.0.0.1:8080"></script>
</head>
<body>
</body>
</html>

node js 服务器代码：

//调用http模块
var http = require('http'); 
var server = http.createServer(function (request, response) {
     response.writeHead(200, {
        'Content-Type': 'application/javascript'
    });
    response.write("callbak({'data':'jsonp'});");
    response.end();
   
});
server.listen(8080);
//打印日志
console.log('Http

最低0.47元/天解锁文章

优惠劵

weixin_34220179

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
AJAX-跨域请求

1、什么是跨域请求浏览器均默认开启了同源策略，它指Ajax请求所在的页面和被请求的页面在域名、端口均相同才能被访问，否则会提示如下错误：XMLHttpRequest cannot load xxxxxxx is not allowed by Access-Control-Allow-Origin.2...
复制链接

扫一扫