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日

相关文章

  • javascript贪吃蛇完整版(源码)

    JavaScript贪吃蛇完整版(源码)攻略 一、简介 本项目是一个使用JavaScript实现的贪吃蛇游戏,包含了完整的源代码。该游戏采用Canvas进行绘制,并具有基本的操作功能,包括开始、暂停、重新开始等。本项目适合JavaScript初学者学习。 二、源码文件结构 本项目的源码文件主要分为HTML、CSS和JavaScript三个部分。具体文件结构如…

    JavaScript 2023年6月11日
    00
  • javascript html5实现表单验证

    JavaScript HTML5实现表单验证 表单验证是Web应用程序中非常重要的功能,可以帮助我们避免用户输入无效或不正确的数据,提高用户体验和数据准确性。在HTML5中,JavaScript可以轻松实现表单验证而无需从头编写自定义验证规则。 设置HTML5表单验证规则 HTML5中,可以使用各种内置的验证规则来检查表单字段。这些验证规则基于HTML5表单…

    JavaScript 2023年6月10日
    00
  • Javascript前端UI框架Kit使用指南之Kitjs简介

    Javascript前端UI框架Kit使用指南之Kitjs简介 什么是Kitjs Kitjs是一个基于Javascript的前端UI框架,它具有轻便、易用、灵活的特性。 Kitjs基于jquery开发,借鉴了bootstrap、semantic等其他流行UI库的风格和思想,提供了更丰富的组件库,包括表格、表单、弹窗、标签页等常用组件。同时,Kitjs也支持自…

    JavaScript 2023年6月11日
    00
  • asp.net下模态对话框关闭之后继续执行服务器端代码的问题

    ASP.NET下模态对话框关闭之后继续执行服务器端代码的问题,可以通过以下方式实现: 1. 使用JavaScript和AJAX 在模态对话框中的“确认”或“取消”按钮中添加JavaScript代码,利用 AJAX 技术向服务器发送请求,通知服务器对话框已经被关闭,同时执行需要执行的服务器端代码。以下是示例代码: function CloseModal() {…

    JavaScript 2023年6月11日
    00
  • 浅谈javascript中字符串String与数组Array

    浅谈JavaScript中字符串String与数组Array 1. 字符串String 字符串在JavaScript中表示一段文本,可以使用单引号 ‘ 或双引号 ” 包裹起来。例如: let str1 = ‘Hello, world!’; let str2 = "Hello, JavaScript!"; 1.1 字符串的属性和方法 1.1…

    JavaScript 2023年5月27日
    00
  • JavaScript中合并数组的N种方法

    介绍”JavaScript中合并数组的N种方法” 前言 在JavaScript中,合并两个或多个数组的方式非常多。这篇文章将讨论一些常见的合并数组的方法以及如何使用它们。 方法1: 使用concat()方法 通过使用concat()方法,我们可以将两个或多个数组合并成一个数组。 const arr1 = [1, 2, 3]; const arr2 = [4,…

    JavaScript 2023年5月27日
    00
  • JavaScript适配器模式原理与用法实例详解

    JavaScript适配器模式原理与用法实例详解 适配器模式基本概念 适配器模式是一种结构型设计模式,在现实生活中也经常出现。例如旅游适配器,通过把不同国家的电源插头转换成自己国家的电源插头来实现电器的兼容。 在JavaScript中,适配器模式的应用场景也很广泛,主要用于处理一些不兼容的接口或函数调用,,只要是两个或多个对象之间接口不兼容的情况都可以使用适…

    JavaScript 2023年6月11日
    00
  • Ajax+js实现异步交互

    实现”Ajax+js实现异步交互”的具体步骤如下: 创建 XMLHttpRequest 对象 使用Js 中的 XMLHttpRequest 对象创建Ajax请求,该对象用来与服务器交互,从服务器请求数据和处理响应。 var xmlhttp; if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Oper…

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