Javascript 跨域知识详细介绍

Javascript 跨域知识详细介绍

什么是跨域?

在 Web 开发中,当一个网页的脚本程序试图去访问另一个网页中的内容时,如果这两个网页之间的协议、域名、端口号不一致,就会触发浏览器的同源策略产生跨域问题。跨域问题是一个非常常见的问题,也是 Web 开发中必须要面对和解决的问题。

同源策略

同源是指,两个页面拥有相同的协议(http/https)、域名 和 端口,只有这三者完全相同才被认为是同源。

同源策略是不允许跨域访问操作(如读写 cookie、DOM 操作等),同源策略的设计是为了保证用户数据的安全,防止恶意脚本窃取用户的个人信息。

跨域的解决方案

1. JSONP( JSON with Padding )

JSONP利用了 script 标签是不受同源策略限制的特性,通过 script 标签引入一个包含回调函数的 json 文本,从而实现跨域访问。

示例:

// 定义回调函数
function handleData(data) {
  console.log(data);
}

// 动态创建 script 标签,设置请求url
const script = document.createElement('script');
script.src = 'http://example.com/api/data?callback=handleData';

// 把标签插入到html中
document.getElementsByTagName('head')[0].appendChild(script);

2. CORS( Cross-Origin Resource Sharing )

CORS实现跨域请求的核心思想是在服务端设置允许跨域访问的响应头,浏览器将在请求时检测响应中是否包含这些允许跨域的头信息,如果有,则浏览器会允许对方访问。

示例:

服务端返回响应头信息:Access-Control-Allow-Origin

Access-Control-Allow-Origin: *

表示允许所有域名访问。

3. 代理

代理就是设置一个中间代理服务器,在这个代理服务器上进行跨域请求,再把数据返回给前端,通过代理,前端可以绕开同源策略直接访问需要的资源。

示例:

fetch('/api/data', {
  method: 'POST',
  credentials: 'include'
})
.then(res => res.json())
.then(res => {
  console.log(res);
})
.catch(err => {
  console.error(err);
})

前端通过fetch请求代理服务器设置了请求地址为 "/api/data",代理服务器在后台转发请求到 "/domain/api/data" 地址。

总结

以上是跨域的三种解决方案,不同的场景和需求需要选择不同的方案来解决跨域问题。同时,开发者要时刻注意跨域带来的安全问题,防止恶意攻击造成的数据泄漏和其他风险。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:Javascript 跨域知识详细介绍 - Python技术站

(0)
上一篇 2023年5月18日
下一篇 2023年5月18日

相关文章

  • 如何使用JS console.log()技巧提高工作效率

    如何使用JS console.log()技巧提高工作效率 JavaScript 是前端开发必不可少的一门语言,而 console.log() 是 JS 里常用的调试工具。在这里,我们将从几个方面介绍如何使用 console.log() 技巧提高工作效率。 1. console.log()基本使用 console.log() 不仅仅只是打印一些信息。在开发过程…

    JavaScript 2023年5月28日
    00
  • js前端上传文件缩略图技巧示例详解

    JS前端上传文件缩略图技巧示例详解 概述 随着移动设备的普及和网络带宽的提高,越来越多的网站开始支持大文件/多文件上传,而在上传前生成文件缩略图可以减轻服务器的负担,同时也能增强用户体验。本文将详细介绍JS前端上传文件缩略图的技巧。 目录 图片处理库 文件预览 文件MD5 文件分片上传 CORS跨域 图片处理库 在缩略图生成过程中,我们需要进行对图片的压缩、…

    JavaScript 2023年5月27日
    00
  • 详解JavaScript for循环中发送AJAX请求问题

    下面是详解JavaScript for循环中发送AJAX请求问题的攻略: 问题描述 在JavaScript中,我们经常需要使用for循环来遍历数组或对象,如果在循环体内发送多个AJAX请求会遇到什么问题呢? for (var i = 0; i < arr.length; i++) { $.ajax({ url: ‘http://example.com/…

    JavaScript 2023年6月11日
    00
  • javascript自执行函数

    JavaScript自执行函数(Self-Invoking Function),又叫立即执行函数(Immediately-Invoked Function Expression,IIFE),是一种可以立即自动执行的函数。它的语法结构非常简单: (function(){ // code })(); 上述代码定义了一个匿名函数,并立即执行。整个函数块被包含在一对…

    JavaScript 2023年5月27日
    00
  • ajax实现简单实时验证功能

    下面是“ajax实现简单实时验证功能”的攻略: 什么是Ajax实时验证 Ajax是一种用于创建快速动态Web网页的技术,通过在不刷新页面的情况下向服务器发送请求并获取响应数据,可以实现实时验证表单数据的功能。 通常在前端验证数据的时候,我们会通过JavaScript来实现,但是客户端验证容易被用户绕过,所以我们还需要在后端进行验证。而利用Ajax可以在前端先…

    JavaScript 2023年6月10日
    00
  • js实现倒计时及时间对象

    下面是详细讲解“JS实现倒计时及时间对象”的完整攻略。 时间对象 在 JavaScript 中,可以使用内置的时间对象 Date 来处理日期和时间。所以,我们可以借助 Date 对象来实现倒计时。 获取当前时间 首先,我们需要获取当前的时间。使用 new Date() 可以获取当前的日期和时间。 let now = new Date(); // 获取当前时间…

    JavaScript 2023年5月27日
    00
  • javascript中setAttribute兼容性用法分析

    下面是“javascript中setAttribute兼容性用法分析”的完整攻略: 1. 什么是setAttribute方法? 在javascript中,设置元素属性有几种方法,其中之一是“setAttribute”方法。setAttribute()方法是Element对象的方法之一,用于设置给定元素的属性的值。它有两个参数:属性名称和属性值。使用setAt…

    JavaScript 2023年5月28日
    00
  • JavaScript判断数组是否存在key的简单实例

    下面是详细讲解JavaScript判断数组是否存在key的简单实例的完整攻略。 问题背景 在JavaScript开发过程中,有时候需要判断一个数组中是否存在某个指定的key,那么该怎么做呢? 解决方案 我们可以采用JavaScript内置的Array对象的includes()方法或数组的indexOf()方法来判断数组中是否存在某个指定的key。 使用inc…

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部