Javascript跨域总结

最新推荐文章于 2024-07-25 17:11:11 发布

zzmxz

最新推荐文章于 2024-07-25 17:11:11 发布

阅读量570

点赞数 1

分类专栏： web前端文章标签： javascript ajax 服务器

本文链接：https://blog.csdn.net/zzmxz/article/details/62421630

版权

本文介绍了JavaScript跨域问题产生的原因——同源策略，并详细阐述了解决跨域的几种方式，包括JSONP、AJAX、SSE（服务器发送事件）和WebSocket。分别展示了它们的工作原理和使用示例，帮助读者理解和掌握不同场景下的跨域解决方案。

摘要由CSDN通过智能技术生成

什么是跨域？

我们经常会在页面上使用ajax请求访问其他服务器的数据,此时,客户端会出现跨域问题，跨域问题是由于javascript语言安全限制中的同源策略造成的。简单来说,同源策略是指一段脚本只能读取来自同一来源的窗口和文档的属性,这里的同一来源指的是主机名、协议和端口号的组合。例如：

这里写图片描述

解决跨域的几种方式：

JSONP

JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。其核心思想是利用JS标签里面的跨域特性进行跨域数据访问，在JS标签里面存在的是一个跨域的URL，实际执行的时候通过这个URL获得一段字符串，这段返回的字符串必须是一个合法的JS调用，通过EVAL这个字符串来完成对获得的数据的处理。
在HTML文档中能够发起HTTP请求的元素有：< a>，< img >，< link> ，< script>，< iframe>< frame>请求HTML文档文件，< form>请求（get/post），< object>请求其他资源文件，音频视频，插件，< source>用于音频视频，从域的概念来讲，HTML中的这些元素，都是可以跨域请求资源的。这些请求都是传统的HTTP请求。
代码：
服务器端：Nodejs服务器

var http = require("http");
var https = require("https");
url = require('url');
var port = process.env.PORT || 9000;
function requestlistener(req, res) {
   
    res.writeHead(200,{
  "Content-Type":"application/json"});
    var otherArray = ["item1", "item2"];
    var otherObject = { item1: "item1val", item2: "item2val" };
    var json = JSON.stringify({
        anObject: otherObject,
        anArray: otherArray
    });
    req = url.parse(req.url, true);
    if(!req.query.callback){
        res.end();
    }
    //console.log("name is:"+req.query.name);
    res.write(req.query.callback+"("+json+")");
    res.end();
}
http.createServer(requestlistener).listen(port);
console.log('The HTTPS server is listening on port ' + port);

客户端：分2种形式jquery.getJSON和jquery.ajax
getJSON:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>crossDomain</title>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
</head>
<body&