AJAX中的跨域(CORS) 问题 （更新于2023.02.04）

news2025/1/18 19:06:29

目录​​​​​​​

预检请求

实例讲解

2023.02.04 更新

此文章在介绍跨域加载的同时，也解决了在使用axios.post()时如下跨域加载失败问题： 

from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

在了解跨域CORS问题时我们首先提出预检请求(options)的概念

预检请求

预检请求是在发送实际的请求之前，客户端会先发送一个 OPTIONS 方法的请求向服务器确认，如果通过之后，浏览器才会发起真正的请求，这样可以避免跨域请求对服务器的用户数据造成影响。当然有的请求是没有预检请求OPTIONS的，因为 CORS 将请求分为了两类：简单请求和非简单请求。

根据 MDN 的文档定义，请求方法为：GET、POST、HEAD，请求头 Content-Type 为：text/html、text/plain、multipart/form-data、application/x-www-form-urlencoded 的就属于 “简单请求” 不会触发 CORS 预检请求。

例如，如果请求头的 Content-Type 为 application/json 就会触发 CORS的预检请求OPTIONS，这里也会称为 “非简单请求”。

实例讲解

 对于如下node.js代码作为服务端,且GET和POST请求都设置了允许跨域访问

//1.引入express
const express = require('express')

//2.创建应用对象
const app = express()

//3.创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装

app.get('/server',(request,response)=>{
    //设置响应头 允许跨域访问
    response.setHeader('Access-Control-Allow-Origin','*')
    //设置响应体
    response.send('HELLO AJAX!')
})

app.post('/server',(request,response)=>{
    //设置响应头 允许跨域访问
    response.setHeader('Access-Control-Allow-Origin','*')
    response.send('HELLO AJAX!')
})

1.客户端为如下JS代码使用axios.get()执行AJAX请求

    var $btn = $('button').eq(0)
    $btn.click(function(){
        axios.get("http://127.0.0.1:8000/server",{
            //url参数设置
            params:{
                a:1,
                b:2
            }
        }
        ).then(data => {
            console.log(data) //data为响应体，包括其所有响应状态等
        })
    })

由于我们在服务端设置了可以允许跨域加载访问，所以会正确得到结果，且请求头 Content-Type为text/html属于简单请求，不会触发CORS的预检请求(options):

2..若客户端为如下JS代码，使用axios.post()执行AJAX请求跨域加载,则会触发错误

  var $btn = $('button').eq(0)
    $btn.click(function(){
        axios.post("http://127.0.0.1:8000/server",{
            a:1, //axios.post()第二个参数设置的是请求体
            b:2
        }
        ).then(data => {
            console.log(data) //data为响应体，包括其所有响应状态等
        })
    })

 这里的错误指没有允许跨域加载访问，可是我们在服务端POST请求中是设置了允许跨域加载访问的啊，原因出在axios.post()的请求是非简单请求，我们从下图可以看出其请求的请求头格式为application/json：

所以axios.post()就会触发 CORS 预检请求,但是我们node.js服务端却并没有设置app.options()请求的响应函数，所以直接报错,解决方法如下四种：

  1. 在node.js服务端设置app.all()路由规则接收GET、POST、HEAD，OPTION等任何请求，在其中设置允许跨域加载访问，当axios.post()触发CORS预检请求自然会被告知允许跨域加载，但是这样的话服务端难以直接区分请求类型并给出相应的响应。
  2. 在node.js端单独设置app.option()路由规则，并且在其中设置response.setHeader('Access-Control-Allow-Origin','*') 允许跨域访问，在xios.post()触发CORS的预检请求OPTIONS时，会在服务端找到此路由规则验证，即会被告知允许跨域加载，然后再发起真的POST请求，并且走服务端的POST请求路由。
  3. 直接修改客户端JS中axios.post()代码,为POST请求修改请求头类型，使其成为简单请求不触发CORS的预检请求OPTIONS： 
        var $btn = $('button').eq(0)
    $btn.click(function(){
        axios.post("http://127.0.0.1:8000/server",{
            a:1,
            b:2
        },{
            /*修改请求头类型，使其成为简单请求
            从而不触发CORS预检请求*/
            headers: {
            'Content-Type':'application/x-www-form-urlencoded'
            }
        }
        ).then(data => {
            console.log(data) //data为响应体，包括其所有响应状态等
        })
    })

      4.使用cors中间件解决 cors是Express的一个第三方中间件，此方法可以解决AJAX中所有跨域问题，推荐使用此方法。此方法使用步骤如下所示：  

  • npm install cors 安装中间件
  • const cors = require("cors")  导入中间件
  • 在所有路由配置之前注册中间件 app.use(cors()) 
    //1.引入express
const express = require('express')
const cors = require('cors')
//2.创建应用对象
const app = express()
app.use(cors())

//3.创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装

app.get('/server',(request,response)=>{
    //设置响应头 允许跨域访问
    response.setHeader('Access-Control-Allow-Origin','*')
    //设置响应体
    response.send('HELLO AJAX!')
})

app.post('/server',(request,response)=>{
    //设置响应头 允许跨域访问
    response.setHeader('Access-Control-Allow-Origin','*')
    response.send('HELLO AJAX!')
})

app.listen(80,()=>{
    console.log("127.0.0.1:80监听中...")
})

2023.02.04 更新

有同学提问原生JS怎么解决，js中的Ajax使用原生js代码如下所示：

<body>
    <button>按钮</button>
    <script>
        var btn = document.getElementsByTagName('button')[0]

        btn.onclick = function(){
            var xhr = new XMLHttpRequest()
            xhr.open('post','http://127.0.0.1:8000/server')
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded;charset=UTF-8");//设置请求内容形式，以便于后台解析表单数据
            xhr.send("user=Du") //若为post请求，参数传递在send()方法中以字符串参数形式传递
            
            xhr.onreadystatechange = function(){ //0(xhr未初始化) 1(xhr open了服务器) 2(xhr  send了数据出去) 3(接收到了部分服务端返回的数据) 4(服务端返回的数据全部接收了)
                if(this.readyState === 4)
                {
                    if(this.status >= 200 && this.status <300 ){
                        console.log(this.status)
                        console.log(this.statusText)
                        console.log(this.getAllResponseHeaders())
                        console.log(this.response)
                       
                    }                       
                }
            }
        }
    </script>
</body>

 nodeJS服务端继续使用cors中间件解决：


//1.引入express
const express = require('express')
var bodyParser = require('body-parser')
const cors = require('cors')
//2.创建应用对象
const app = express()
app.use(cors())
// 配置body-parser
// 只要加入这个配置，则在request请求对象上会多出来一个属性：body
// 也就是说可以直接通过requset.body来获取表单post请求数据
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false})) 
//3.创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
 
app.get('/server',(request,response)=>{
    //设置响应头 允许跨域访问
    response.setHeader('Access-Control-Allow-Origin','*')
    //设置响应体
    response.send('HELLO AJAX!')
})
 
app.post('/server',(request,response)=>{
    //设置响应头 允许跨域访问
    response.setHeader('Access-Control-Allow-Origin','*')
    response.send('HELLO AJAX!')
    console.log(request.body)
})
 
app.listen(8000,()=>{
    console.log("127.0.0.1:8000监听中...")
})

在我们点击按钮后，网页端控制台输出如下：

服务端输出post请求体中携带的内容：

 

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/409088.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

element-ui实现图片上传功能（前台部分）

element-ui实现图片上传功能（前台部分）

文章目录前言一、 template 部分二、script部分1、导入token2、在data中注册以下3、method中的方法4、style前言 最近做的项目中需要实现图片上传功能&#xff0c;一开始也不懂&#xff0c;经过一段时间的学习后&#xff0c;终于实现了图片上传功能。我将分为前台与后台两部分…
阅读更多...
vue 基于axios封装request接口请求——request.js文件

vue 基于axios封装request接口请求——request.js文件

目录 了解几个Content-type类型 第一种&#xff1a;application/json;charsetUTF-8 第二种&#xff1a;multipart/form-data 第三种&#xff1a; application/x-www-form-urlencoded 第一步新建request.js文件 第二步新建services/apiUrl文件 第三步新建services/index.…
阅读更多...
【前端】深入浅出缓存原理

【前端】深入浅出缓存原理

缓存的基本原理 对于前端来说&#xff0c;缓存主要分为浏览器缓存&#xff08;比如 localStorage、sessionStorage、cookie等等&#xff09;以及http缓存&#xff0c;也是本文主要讲述的。 当然叫法也不一样&#xff0c;比如客户端缓存大概包括浏览器缓存和http缓存 所谓htt…
阅读更多...
手撕前端面试题【javascript~文件扩展名、分隔符、单向绑定、判断版本、深浅拷贝、内存泄露等】

手撕前端面试题【javascript~文件扩展名、分隔符、单向绑定、判断版本、深浅拷贝、内存泄露等】

前端的那些基本标签&#x1f353;&#x1f353; 直角三角形&#x1f353;&#x1f353;文件扩展名&#x1f353;&#x1f353;分隔符&#x1f353;&#x1f353;单向绑定&#x1f353;&#x1f353;创建数组&#x1f353;&#x1f353;判断版本&#x1f353;&#x1f353;什么是…
阅读更多...
四、nginx静态文件的配置

四、nginx静态文件的配置

1. 根据上节内容的提示&#xff0c;我们知道如何进行nginx的信号控制和命令行控制了。 2. 这节主要是学习nginx的静态文件、缓存、静态文件压缩等相关内容。 一、 配置并访问nginx静态文件 1.1 root配置nginx静态文件地址 在nginx.conf 配置文件中默认使用root配置了nginx静态…
阅读更多...
vue项目使用svg图片

vue项目使用svg图片

&#xff08;svg-sprite-loader以及vue2-svg-icon的使用&#xff09; 第一种方式&#xff1a; 1、安装svg-sprite-loader npm install svg-sprite-loader --save-dev 2、webpack 配置&#xff08;build/webpack.base.conf.js&#xff09; { test: /\.svg$/, loader: svg-spr…
阅读更多...
小程序表单校验uni-forms正确使用方式及避坑指南

小程序表单校验uni-forms正确使用方式及避坑指南

小程序表单校验uni-forms正确使用方式及避坑指南一、前言二、成果展示三、uni-forms即时校验四、uni-forms自定义校验规则五、uni-forms异步校验六、完整示例源码七、最后&#xff0c;点个赞一、前言 小程序上使用表单理应是很常用&#xff0c;也很必须的功能&#xff0c;因为…
阅读更多...
【微信小程序】自定义组件

【微信小程序】自定义组件

组件的创建与引用 1.1、创建组件 &#xff08;1&#xff09;在项目的根目录中&#xff0c;鼠标右键&#xff0c;创建 components > test 文件夹 &#xff08;2&#xff09;在新建的 components > test 文件夹中&#xff0c;鼠标右键&#xff0c;点击“新建 Component” …
阅读更多...
通过JavaScript、css、H5 实现简单的tab栏的切换和复用

通过JavaScript、css、H5 实现简单的tab栏的切换和复用

目录 一、效果展示 二、实现的大致原理 三、H5的布局 四、CSS样式 五、JS代码内容 六、完整代码 一、效果展示 二、实现的大致原理 1.我们先通过css 和h5布局得到最基本的tab栏样式&#xff08;有代码参考&#xff09; 2.在获得样式&#xff0c;给我们所需要点击的目标设…
阅读更多...
yolov5部署+微信小程序前端展示

yolov5部署+微信小程序前端展示

分为yolov5项目部署和微信小程序两部分&#xff0c;先介绍微信小程序前端展示flask后端&#xff0c;之后介绍项目部署这部分。 一、先上效果图 1. 点击选择图片&#xff0c;调用摄像头选择图片 2.选择图片之后&#xff0c;点击开始检测&#xff0c;然后返回结果 ​​​​​​…
阅读更多...
CTF----Web真零基础入门

CTF----Web真零基础入门

目录 前置知识导图&#xff1a; ​TCP/IP体系结构&#xff08;IP和端口&#xff09;&#xff1a; IP是什么&#xff1a;是计算机在互联网上的唯一标识&#xff08;坐标&#xff0c;代号&#xff09;&#xff0c;用于在互联网中寻找计算机。 内网&#xff08;局域网&#xf…
阅读更多...
JSONP解决跨域问题

JSONP解决跨域问题

一、什么是同源 概念&#xff1a;如果两个页面的协议、域名和端口都相同&#xff0c;则这两个页面具有相同的源。 二、什么是同源策略 概念&#xff1a;是浏览器提供的一个安全功能。 三、什么是跨域 概念&#xff1a;同源指的是两个URL的协议、域名、端口号一致&#xff0c…
阅读更多...
前端开发调式必备技能F12开发者工具之Elements（元素）面板，详细图解带流程【第一部分】

前端开发调式必备技能F12开发者工具之Elements（元素）面板，详细图解带流程【第一部分】

目录 一、进入浏览器开发工具的几种方式 二、Elements&#xff08;元素&#xff09;面板 左侧区域 右侧区域 计算样式 事件监听器 大家好&#xff01;我是爷爷的茶七里香&#xff0c;这个名字有没有让你想起周董的歌捏&#xff1f;好了&#xff0c;废话不多说&#xff0c;开始今…
阅读更多...
项目实训记录（十二）——el-table-column根据条件修改字体颜色

项目实训记录（十二）——el-table-column根据条件修改字体颜色

目录 一、干了什么&#xff1f; 二、问题和解决方法 1. el-table-column根据条件修改字体颜色 2.问题 总结 一、干了什么&#xff1f; 本周要完成数据去重工作和前端的完善。 清理工作 主要是来删除用户插入的重复数据。由管理员决定表是否允许重复数据。如果用户上传的表不允…
阅读更多...
vue3 自定义全局loading组件 （PC和移动端都非常适用）

vue3 自定义全局loading组件 （PC和移动端都非常适用）

前言 在开发的过程中&#xff0c;点击提交按钮&#xff0c;或者是一些其它场景总会遇到loading加载框&#xff0c;PC的一些ui库也没有这样的加载框&#xff0c;无法满足业务需求&#xff0c;因此可以自己自定义一个&#xff0c;实现过程如下。 效果图&#xff08;loading样式…
阅读更多...
个人博客小程序

个人博客小程序

文章目录1.前言2.首页博客数据展示3.用data中的数据渲染博客展示4.使用云数据库创建集合blogs5.读取数据库中的数据6.创建添加博客页面1.前言 这篇文章详细的介绍了个人博客小程序的云开发流程&#xff0c;包括博客展示页面&#xff0c;添加博客页面的创建&#xff0c;以及云函…
阅读更多...
pm2基本使用

pm2基本使用

1.pm2的基本介绍 pm2是node的进程管理器&#xff0c;利用它可以简化node任务的管理,且内置了许多功能,常用于后台脚本管理。 pm2特性 自带热部署 - - - 当源文件更新 线上项目也会自动重启后台运行 - - - 不会占用实时窗口 会在后台运行服务信息查看 - - - 查看运行中程序的…
阅读更多...
Vue权限控制

Vue权限控制

此文章根据视频教程进行整理前端面试官必问系列-后台系统的权限控制与管理&#xff0c;建议搭配视频教程一起食用效果更佳 目录 1、权限相关概念 1.1、权限的分类 后端权限 前端权限 1.2 、前端权限的意义 降低非法操作的可能性 尽量减少不必要请求&#xff0c;减轻服务…
阅读更多...
VUE跨域、常用解决跨域的方法

VUE跨域、常用解决跨域的方法

当我们遇到请求后台接口遇到 Access-Control-Allow-Origin 时&#xff0c;那说明跨域了。 跨域是因为浏览器的同源策略所导致&#xff0c;同源策略&#xff08;Same origin policy&#xff09;是一种约定&#xff0c;它是浏览器最核心也最基本的安全功能&#xff0c;同源是指&…
阅读更多...
〖大前端 - 基础入门三大核心之CSS篇⑱〗- CSS中的背景

〖大前端 - 基础入门三大核心之CSS篇⑱〗- CSS中的背景

说明&#xff1a;该文属于 大前端全栈架构白宝书专栏&#xff0c;目前阶段免费开放&#xff0c;购买任意白宝书体系化专栏可加入TFS-CLUB 私域社区。福利&#xff1a;除了通过订阅"白宝书系列专栏"加入社区获取所有付费专栏的内容之外&#xff0c;还可以通过加入星荐…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023