跨域的原理和处理跨域的常用方法

已于 2022-04-24 16:13:29 修改
阅读量2.8k 收藏 1
点赞数
分类专栏： 前端 文章标签： 前端 javascript
于 2022-04-24 16:11:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/syzdev/article/details/124384965
版权

1 浏览器同源策略

1.1 同源策略简介

同源策略是浏览器的一个重要的安全策略，它用于限制一个源与另外一个源之间的交互，它能帮助阻隔恶意脚本，减少隐私泄露和网络攻击等风险。

1.2 源（Origin）

通常把访问Web中内容的地址就叫源（Origin），具体来说就是访问一个内容的URL，在URL中必须指明协议、主机域名和端口。

一个URL可能包含协议、主机域名、端口、目录、文件名、查询参数和锚点这些部分，以下面URL为例：

https://syzdev.cn:443/news/index.html?category=1&page=2#top

在这里插入图片描述

  • 协议：网络应用层协议，常见的有HTTP、HTTPS和FTP协议；
  • 主机域名：可以是主机IP地址或域名；
  • 端口：可以指定具体的端口，若不指定端口则为默认值，如HTTP协议的默认端口为80端口，HTTPS协议的默认端口为443端口；
  • 目录：目标文件的目录；
  • 文件名：目标文件的文件名；
  • 查询参数：以“?”分隔在URL后追加参数，用键值对（key=value）的形式表示参数值，若有多个参数，则键值对之间以“&”分隔；
  • 锚点：用于定位到页面中的具体位置，若定位到页面中文章的某个标题。

1.3 同源

如果两个源的协议、主机域名和端口都相同的话，那么这两个源就称为同源，下面举例说明：

  1. 目录和文件名
    在这里插入图片描述
  2. 协议
    在这里插入图片描述
  3. 主机域名
    在这里插入图片描述
  4. 端口
    在这里插入图片描述

1.4 同源策略的限制

首先要明确一点，同源策略是浏览器的一种机制，同源策略所产生的行为都是来自于浏览器。同源策略有如下限制：

  • 浏览器本地存储：localStorage、sessionStorage和IndexedDB的作用范围都是受同源策略的限制；
  • 跨源脚本访问：其他源的脚本无法操作本源中的文档；
  • 跨源网络请求：同源策略限制了不同源之间的网络请求交互。

其中跨源网络请求就是本文讨论的重点，限制跨源网络请求本意是为了浏览器安全，但是实际开发中，网络请求和请求主机往往都是在不同的源的，此时就需要跨源访问，所用的技术就是“跨域”。

2 跨域的方法

当请求发生跨域时，若没有处理跨域，则会在控制台看到如下错误：

在这里插入图片描述


下面列出的四种处理跨域方法的完整代码都已经上传至GitHub仓库：cors-demo。

2.1 CORS

跨域资源共享（CORS，Cross-Origin Resource Sharing）允许Web应用服务器进行跨源访问控制，从而使跨源数据传输得以安全进行。

跨源资源共享标准新增了一组HTTP首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源。另外，规范要求，对那些可能对服务器数据产生副作用的HTTP请求方法（特别是GET以外的HTTP请求，或者搭配某些MIME类型的POST请求），浏览器必须首先使用OPTIONS方法发起一个预检请求（preflight request），从而获知服务端是否允许该跨源请求。服务器确认允许之后，才发起实际的HTTP请求。在预检请求的返回中，服务器端也可以通知客户端，是否需要携带身份凭证（包括Cookies和HTTP认证相关数据）。


在CORS机制下，浏览器HTTP请求被分为了简单请求和非简单请求两种，其中简单请求将直接发送请求，而非简单请求会先发送一个预检请求，当服务器确认之后才能发出HTTP请求。

满足以下条件的请求称为简单请求，除此之外都是非简单请求：

  • 请求方法为GET、HEAD和POST；
  • 请求头中只能包含Accept、Accept-Language、Content-Language和Content-Type，且Content-Type的值只能为text/plain、multipart/form-data和application/x-www-form-urlencoded；

2.1.1 简单请求的发送过程

以下面通过XMLHttpRequest发送简单请求为例：

function send() {
  const xhr = new XMLHttpRequest()
  xhr.open('GET', 'https://syzdev.cn/news')
  xhr.send()
}
  1. 客户端发送HTTP简单请求，请求头中包含请求类型、请求源和请求服务器等字段。

在这里插入图片描述

  1. 服务器收到请求后，会根据请求头的Origin字段判断这个请求来自于哪个源，若这个源不在访问服务器资源的许可范围内，则会抛出一个错误；若这个源在范围之内，则服务器会在响应头中添加Access-Control-Allow-Origin字段，字段的值可能是Origin的值https://syzdev.cn，或者是通配符*，表示所有的源都允许。

在这里插入图片描述

2.1.2 非简单请求的发送过程

以下面通过XMLHttpRequest发送简单请求为例：

function send() {
  const xhr = new XMLHttpRequest()
  xhr.open('DELETE', 'https://syzdev.cn/others')
  xhr.send()
}
  1. 客户端发送HTTP非简单请求，浏览器在正式发送请求之前，会使用OPTIONS方法发起一个预检请求（preflight request），从而获知服务端是否允许该跨源请求。

在这里插入图片描述

  1. 客户端收到请求后，检查Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段以后，判断请求的源和方法类型是否在允许范围内，若不在允许范围内，则抛出一个错误；若在允许的范围内，服务器则返回一个确认的响应。

在这里插入图片描述

  1. 一旦客户端通过了预检请求，则后续的交互都和简单请求一样。

2.2.3 CORS的使用方法

以express为例，使用CORS有两种方式，一种是通过response.setHeader设置响应头，一种是通过中间件cors。发送请求的方法如下：

function send() {
  const xhr = new XMLHttpRequest()
  xhr.open('GET', 'http://localhost:3000/')
  xhr.send()
  xhr.onreadystatechange = function () {
    // xhr.readyState === 4表示响应已完成，此时可以获取并使用服务器的响应。
    if (xhr.readyState === 4) {
      document.getElementById('main').innerHTML = xhr.response
    }
  }
}

处理跨域的两种方式分别如下：

  1. 设置响应头
const express = require('express')
const app = express()
app.get('/', (request, response) => {
  // 设置响应头，允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*')
  // 设置响应体
  response.send('setHeader')
})
app.listen(3000, () => {
  console.log('服务已启动，监听3000端口')
})
  1. cors中间件
const express = require('express')
const app = express()

// 引入cors，返回的是一个函数，直接()执行，执行后是一个Express中间件，app.use使用它即可
app.use(require('cors')())

app.get('/', (req, res) => {
  // send()方法，响应给客户端信息
  res.send('cors_middleware')
})

app.listen(3000, () => {
  console.log('网站服务器启动成功！')
})

2.2 JSONP

JSONP主要就是利用了<script>标签没有跨域限制的这个特性来完成的，使用JSONP进行跨域只支持GET请求。在JSONP中是使用<script>标签的src属性发送请求的，如：

<script src="http://localhost:3000/"></script>

此时只能发送请求，并没有响应请求的能力，所以需要给请求添加一个回调函数，这个函数可以作为query参数发送给服务端，由服务端再返回这个参数并由浏览器解析：

<body>
  <div id="main"></div>
  <script>
    function jsonpCallback(res) {
      document.getElementById('main').innerHTML = res.data
    }
  </script>
  <script src="http://localhost:3000/?callback=jsonpCallback"></script>
</body>

后端代码如下：

let express = require('express')
let app = express()
app.get('/', (request, response) => {
  let callback = request.query.callback
  const data = JSON.stringify({
    data: 'JSONP'
  })
  response.send(callback + `(${data})`)
})
app.listen(3000, () => {
  console.log('服务已启动，监听3000端口')
})

在后端通过request.query.callback获取到前端传入的请求回调方法jsonpCallback，在后端通过字符串拼接callback + (${data})``，把后端数据data通过函数参数的形式返回给客户端，客户端收到参数后解析成函数调用jsonpCallback(res)，在客户端执行了回调并且收到了后端传入的数据data。

总结来说，JSONP就是利用了<script>标签可以跨域发送请求这一特点，客户端将方法作为请求的参数发送给服务器，服务器将后端数据作为方法的参数返回给客户端，最后客户端将返回的信息解析成函数调用，这样就实现了跨域请求交互。

2.3 Vue CLI

使用Vue CLI处理跨域只能在开发环境下使用，下文中示例代码的创建环境如下：

  • Vue CLI版本：@vue/cli 5.0.4
  • Vue版本：2.x

使用Vue CLI创建一个Vue2.x的项目，输入命令npm i axios添加axios，新建http.js封装axios内容如下：

import axios from 'axios'
const http = axios.create({
  baseURL: '/api'
})
export default http

在App.vue中添加请求的方法：

<template>
<div id="app">
  {{ msg }}
  </div>
</template>

<script>
  import http from './http'
  export default {
    name: 'App',
    data() {
      return {
        msg: 'default msg',
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      async fetchData() {
        const res = await http.get('/msg')
        this.msg = res.data
      },
    },
  }
</script>

<style>
</style>

在vue.config.js中添加如下内容：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        // secure: false, // 如果是https接口，需要配置这个参数
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },
  },
})

上面代码中的devServer.proxy就是配置代理，将请求路径中带有/api的请求路径转发到target: 'http://localhost:3000'上，若原始请求路径为http://localhost:8080/api/msg，则通过代理转发后的请求路径为http://localhost:3000/api/msg，但事实上请求路径中的/api只是用来匹配转发路径的，并不是实际请求路径中的一部分，所以在真正发送请求时，需要去掉/api，所用的方法就是pathRewrite，将请求路径中的/api替换为空字符串，这样经过代理转发后的请求路径为http://localhost:3000/msg。

2.4 Nginx

使用Nginx处理跨域和使用Vue CLI处理跨域在写法上非常相似，都是通过中间服务器进行请求转发，但Nginx处理跨域的方法往往是在生产环境下使用，前端代码如下：

<body>
  <div id="main"></div>
  <script>
    (function send() {
      const xhr = new XMLHttpRequest()
      xhr.open('GET', '/api')
      xhr.send()
      xhr.onreadystatechange = function () {
        // xhr.readyState === 4表示响应已完成，此时可以获取并使用服务器的响应。
        if (xhr.readyState === 4) {
          document.getElementById('main').innerHTML = xhr.response
        }
      }
    })()
  </script>
</body>

请求的路径只需要写/api即可，再在Nginx中的conf/nginx.conf文件中配置代理：

    server {
        listen       3030;
        server_name  localhost;

        location /api/ {
            proxy_pass  http://localhost:3000/;
        }

        location / {
            root   html;
            index  index.html index.htm;
        }
    }

通过proxy_pass将请求路径中带有/api的请求转发到http://localhost:3000上。

syzdev
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
跨域的原理理解及解决办法
Jackie Huang
09-16 2685
ps: 如果有任何问题可以评论留言，我看到后会及时解答，评论或关注，您的鼓励是我分享的最大动力 转载请注明出处：https://blog.csdn.net/qq_40938301/article/details/100882672 一、同源策略 早期的浏览器厂商，出于安全性问题的考虑，提出了同源策略的概念，即： Web浏览器只有在同源（域）的时候，才可以让一个网页的脚本（scrip...
Spring Boot和Vue跨域请求问题原理解析
08-25
Spring Boot和Vue跨域请求问题原理解析 跨域请求是指在Web应用程序中，从一个域名下的Web页面去请求另一个域名下的资源，这种请求方式会出现安全问题，为了解决这个问题，出现了同源政策（Same-Origin Policy）。...
[跨域]跨域原理解析
diandiao3054的博客
04-09 132
跨域是什么： 　　是用户访问A网站时所产生的对B网站的跨域访问请求均提交到A网站的指定页面，即浏览器拒绝执行访问其它站点的脚本(Ajax请求)。 为什么会产生跨域： 　　因为同源策略的安全机制。为了站点的安全，同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。 同源的定义 　　如果两个页面的协议，端口（如果有指...
关于跨域,以及跨域的几种方式
weixin_30621919的博客
10-29 491
首先我们来想一想 为什么会有跨域这个名词的出现呢? 跨域又是什么呢?为何要跨域? 浏览器的同源策略又是什么?怎么解决? jsonp又是什么? 跨域的原理又是什么呢? 名词解释: 跨域: 浏览器对于javascript的同源策略的限制,例如a.c...
跨域原理
k0bin的博客
01-27 305
1. 简介 跨域，指浏览器对不同源(协议、域名、端口组成)之间进行资源访问的一种限制如下： 限制如下：        无法跨域请求资源        ajax无法跨域读取cookie、localStorage      &nbsp...
跨域实现原理
架构探险之道
04-06 500
跨域受浏览器同源策略的限制，本域的js不能操作其他域的页面对象（比如DOM）。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。所以我们要通过一些方法使本域的js能够操作其他域的页面对象或者使其他域的js能操作本域的页面对象（iframe之间）。这里需要明确的一点是：所谓的域跟js的存放服务器没有关系，比如baidu.com的页面加载了google.com的js，那么此js的所
老生常谈的跨域处理
08-31
本文主要介绍了常用的几种跨域处理方法、跨域的原理解析及实现方法。具有很好的参考价值，下面跟着小编一起来看下吧
js实现跨域的多种方法
11-22
本文将详细介绍几种常用的JavaScript实现跨域的方法。 1. CORS（跨源资源共享） CORS是一种W3C标准，允许浏览器通过特定的HTTP头部与服务器通信，决定是否允许跨域请求。要实现CORS，服务器需要在响应头中添加`...
js实现跨域的4种实用方法原理分析
10-23
为了打破这种限制，开发者们发展出多种跨域解决方案，其中最常用的包括JSONP（JSON with Padding）和修改`document.domain`属性来跨子域。下面我们将详细探讨这两种方法的原理和实现。 **1. JSONP跨域** JSONP是一...
浅析jsopn跨域请求原理及cors（跨域资源共享）的完美解决方法
12-07
针对这一问题，有几种常见的解决方法，其中最常用的是JSONP（JSON with Padding）和CORS（Cross-Origin Resource Sharing，跨域资源共享）。 **JSONP的原理与实现** JSONP的工作机制是利用`<script>`标签不受同源...
浅谈js中几种实用的跨域方法原理详解
10-20
本篇文章主要介绍了js中几种实用的跨域方法原理详解 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。
CORS跨域原理
sly94的博客
11-29 628
CORS跨域原理： CORSajax请求设置ORigin 服务器通过设置Access-Control-Allow-Origin来进行，如果浏览器检测到相对应的设置，就可以允许ajax进行跨域的访问。 客户端： function getHello() { var xhr = new XMLHttpRequest(); xhr.open("post
跨域原理及解决
github_39274378的博客
08-14 681
解决跨域原理： 首先我们需要理解几点 1jsonp发送的并不是一个ajax请求，是一个script标签   2script标签没有同源策略限制，支持跨域请求   3此时我们将这个script的src指向真实的服务器地址并且携带一个callback=a这样一个参数，后台解析并且返回a这个方法里面包裹着我们需要的数据   4在发送请求前，前台windows中注册a这个方法，之后在a这个...
跨域 问题 原理以及解决方法
Monster的博客
12-26 1614
深入讲解一下CORS：CORS其实就是跨域资源共享，它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。:出现的较晚，它是W3C标准，属于跨域Ajax请求的根本解决方案。
【9大跨域解决方案】跨域原理
2024路在何方
04-02 494
9大跨域解决方案 同源策略 只要以下三者，有一个不一样，那就叫跨域。 协议 域名 端口 注意：子域不同，也叫跨域 为什么浏览器不支持跨域 cookie localStorage 均不支持跨域 DOM元素也有同源策略，比如iframe ajax也不支持跨域 如果可以直接跨域，可以发送恶意请求，造成伪造的请求，会造成信息窃取等危险。 跨域的原理 当客户端向服务端发送请求后，服务...
跨域原理及解决方案
weixin_33704591的博客
04-28 564
目录 1. 跨域原理 1. 定义 2. 同源策略(SOP，Same-Origin-Policy) 3. 同源策略限制内容 3. 允许跨域加载资源的标签 2. 常见跨域场景 3. 跨域解决方案 1. JSONP(JSO...
跨域问题的原理及解决方法
最新发布
bjjx123456的博客
09-26 238
如果没有进行特殊处理，我们在进行前后端联调的时候游览器会发生报错：这是因为请求被同源策略被阻止，出于安全的考虑，使用XMLHttpRequest对象发起HTTP请求（异步请求）时必须遵守同源策略，否则就是跨域的HTTP请求，默认情况下是被禁止的。那什么是同源策略呢？同源策略（Same-Origin Policy）是一个web安全的基础原则。什么是同源呢？指的是从一个地址请求另一个地址，如果协议、主机、端口三者全部一致则不属于跨域注：为什么Postman没有跨域问题呢？
跨域原理+解决方案
qq_38296274的博客
05-05 634
跨域的产生以及为什么会跨域 一、为什么会跨域 跨域的根本原因是因为浏览器的一个安全策略，既同源策略，就是说一个浏览器的行为，是为了保护本地数据不被JavaScript代码获取回来的数据污染，因此拦截的是客户端发出的请求回来的数据接收，即请求发送了，服务器响应了，但是无法被浏览器接收。 二、什么样的请求才是跨域？ 请求的路径需要和当前页面不在同一域名也不在同一ip和端口 之内的请求为跨域请求 三、跨...
tomcat跨域配置_聊聊跨域的原理与解决方法
06-07
跨域是指在一个域名下的文档或脚本试图去请求另一个域名下的资源时，浏览器为了安全，会阻止这种行为。跨域问题是由浏览器的同源策略（Same Origin Policy）引起的。同源策略是浏览器的一种安全机制，它限制了从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。 在Tomcat上解决跨域问题，可以通过配置CORS（Cross-Origin Resource Sharing）来实现。CORS是W3C规范，它允许在服务器端配置允许跨域访问的白名单。 下面是一个简单的Tomcat跨域配置示例： 1. 在Tomcat的conf目录下找到server.xml文件，在<Host>标签中添加以下配置： ```xml <Context path="/" docBase="your_doc_base" debug="0" reloadable="true"> <Valve className="org.apache.catalina.valves.RemoteAddrValve" allow="127.0.0.1" /> <Filter className="org.apache.catalina.filters.CorsFilter"/> <FilterMapping filterName="CorsFilter" urlPattern="/*"/> </Context> ``` 2. 在Tomcat的lib目录下找到catalina.jar文件，将其解压。 3. 将解压后的catalina.jar中的META-INF目录下的context.xml文件拷贝到Tomcat的conf目录下，并修改其中的以下配置： ```xml <Valve className="org.apache.catalina.valves.RemoteAddrValve" allow="127.0.0.1" /> <Filter className="org.apache.catalina.filters.CorsFilter"/> <FilterMapping filterName="CorsFilter" urlPattern="/*"/> ``` 4. 重启Tomcat。 以上就是一个简单的Tomcat跨域配置示例，如果您有其他问题或疑问，可以随时向我提出。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值