Ajax同源策略以及如何解决跨域请求

1. Ajax同源策略

在了解Ajax同源策略之前,我们首先需要知道Ajax请求限制的问题。

什么是Ajax请求限制?

Ajax 只能向自己的服务器发送请求,如果想要向其他服务器发送请求就涉及到跨域请求的问题。

比如现在有一个A网站、有一个B网站,A网站中的 HTML 文件只能向A网站服务器中发送 Ajax 请求,B网站中的 HTML 文件只能向 B 网站中发送 Ajax 请求,但是 A 网站是不能向 B 网站发送 Ajax请求的,同理,B 网站也不能向 A 网站发送 Ajax请求。

在解决这个问题之前,我们就要去理解同源策略的相关概念

1.1 什么是同源策略

Ajax同源策略是由Netscape(网景通信公司)提出的安全策略,它可以让同一网站之间的访问不受限制,但不同网站之间不能随意访问。

Ajax同源策略规定URL地址中的协议(http/https)、域名和端口要都相同,以保证多个页面或者请求来自同一个服务器端,也就是同源,只要有一个不相同,就是不同源。

1.1.1 URL的组成

URL:

URL 通常由几个部分组成,包括协议、服务器地址、端口号、文件路径和查询字符串等,例如 http://www.example.com:8080/index.html?name=Bob

协议:

超文本传输协议(HyperText Transfer Protocol),服务器和浏览器之间传输超文本(HTML、图片等内容)的传送协议。

  • HTTP(Hypertext Transfer Protocol):用于在 Web 浏览器和 Web 服务器之间传输文本、图片、音频、视频等内容。
  • HTTPS(HTTP Secure):是一种基于 SSL/TLS 协议的安全传输协议,可以保证数据传输的安全性。

域名:

在互联网中,域名(Domain Name)是用于便于记忆的网络地址,通常用于访问万维网上的网站。它是由一串用点分隔的名字组成的,例如 www.example.com。其中,.com 称为顶级域名(TLD),example 是一个二级域名,www 则是三级域名。

域名通过一个域名系统(DNS)解析成实际的 IP 地址,以便计算机之间进行通信访问。具体来说,当我们在浏览器中输入一个域名时,浏览器会首先向本地 DNS 服务器发送一个域名解析请求,如果该服务器无法解析,则会向更高层次的 DNS 服务器发送请求,直到找到正确的 IP 地址为止。最终,该 IP 地址用于建立与服务器的连接,以便获取网页内容等资源。

端口号:

端口通常是一个 16 位无符号整数,取值范围为 0 到 65535。

其中,0 到 1023 的端口号被称为“知名端口”(Well-known Port),一般用于标识系统和服务的通信端口,例如 HTTP 使用的默认端口号为 80 。

例如:

  • http://www.example.com/dir/page.html(默认端口号是80)
  • http://www.example.com/dir2/other.html:同源
  • http://example.com/dir/other.html:不同源(域名不同)
  • http://v2.www.example.com/dir/other.html:不同源(域名不同)
  • http://www.example.com:81/dir/other.html:不同源(端口不同)
  • https://www.example.com/dir/page.html:不同源(协议不同)

1.1.2 同源策略的目的
  • 同源政策是为了保证用户信息的安全,防止恶意的网站窃取数据。最初的同源政策是指 A 网站在客户端设置的 Cookie,B网站是不能访问的。
  • 随着互联网的发展,同源政策也越来越严格,在不同源的情况下,其中有一项规定就是无法向非同源地址发送Ajax 请求,如果请求,浏览器就会报错。

1.1.2 演示两个不同源服务器之间发送Ajax请求的限制

在code目录下新建server1目录,然后再server1中新建public目录,在public中新建demo.html页面

DOCTYPE html>
<html lang="en">

<head>
    <title>(server1)演示两个不同源服务器之间发送Ajax请求的限制title>
head>

<body>
    <button id="btn">点我发送请求button>

    
    <script src="../js/ajax.js">script>
    <script>
        // 获取btn
        var btn = document.getElementById('btn');

        // 为按钮添加单击事件
        btn.onclick = function () {
            // 调用ajax函数
            ajax({
                // 表示访问端口号为3001的不同源的server2服务器
                url: 'http://localhost:3001/test',
                success: function (data) {
                    console.log(data)
                }
            })
        }
    script>
body>

html>

在server1目录下,安装express框架,新建app.js

安装express
npm init -y
npm install express --save
npm list express
// 引入express模块
const express = require('express')

// 引入path模块处理路径
const path = require('path')

// 创建网站服务器对象
const app = express()

// 定义中间件处理静态资源
app.use(express.static(path.join(__dirname, 'public')))

// 监听端口
app.listen(3000)
console.log('服务器已启动,请访问localhost:3000')

在code目录下,新建server2目录,在server2目录下安装express框架,并新建app.js文件

// 引入express模块
const express = require('express')

// 创建网站服务器对象
const app = express()

// 定义路由
app.get('/test', (req, res) => {
    res.send('ok')
})

// 监听端口
app.listen(3001)
console.log('服务器已启动,请访问localhost:3000')

分别切换到server1目录和server2目录,在命令行工具中使用nodemon app.js命令分别启动server1和server2两个不同源的服务器

Ajax同源策略以及如何解决跨域请求_第1张图片

在浏览器中访问“http://localhost:3000/demo.html”,点击按钮,查看控制台报错信息

Ajax同源策略以及如何解决跨域请求_第2张图片


1.2 JSONP解决跨域请求问题

JSONP(JSON with Padding)是JSON的一种使用模式,它解决了Ajax同源限制的问题。

JSONP请求使用

你可能感兴趣的:(ajax,服务器,前端)