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

杜同学。 2023-04-11 原文

此文章在介绍跨域加载的同时，也解决了在使用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()请求的响应函数，所以直接报错,解决方法如下四种：

在node.js服务端设置app.all()路由规则接收GET、POST、HEAD，OPTION等任何请求，在其中设置允许跨域加载访问，当axios.post()触发CORS预检请求自然会被告知允许跨域加载，但是这样的话服务端难以直接区分请求类型并给出相应的响应。
在node.js端单独设置app.option()路由规则，并且在其中设置response.setHeader('Access-Control-Allow-Origin','*') 允许跨域访问，在xios.post()触发CORS的预检请求OPTIONS时，会在服务端找到此路由规则验证，即会被告知允许跨域加载，然后再发起真的POST请求，并且走服务端的POST请求路由。

直接修改客户端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请求体中携带的内容：

有关AJAX中的跨域(CORS) 问题（更新于2023.02.04）的更多相关文章

ruby - 如何从 ruby 中的字符串运行任意对象方法？ - 2
总的来说，我对ruby还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用
ruby - 其他文件中的 Rake 任务 - 2
我试图在一个项目中使用rake，如果我把所有东西都放到Rakefile中，它会很大并且很难读取/找到东西，所以我试着将每个命名空间放在lib/rake中它自己的文件中，我添加了这个到我的rake文件的顶部:Dir['#{File.dirname(__FILE__)}/lib/rake/*.rake'].map{|f|requiref}它加载文件没问题，但没有任务。我现在只有一个.rake文件作为测试，名为“servers.rake”，它看起来像这样:namespace:serverdotask:testdoputs"test"endend所以当我运行rakeserver:testid时
ruby-on-rails - Ruby net/ldap 模块中的内存泄漏 - 2
作为我的Rails应用程序的一部分，我编写了一个小导入程序，它从我们的LDAP系统中吸取数据并将其塞入一个用户表中。不幸的是，与LDAP相关的代码在遍历我们的32K用户时泄漏了大量内存，我一直无法弄清楚如何解决这个问题。这个问题似乎在某种程度上与LDAP库有关，因为当我删除对LDAP内容的调用时，内存使用情况会很好地稳定下来。此外，不断增加的对象是Net::BER::BerIdentifiedString和Net::BER::BerIdentifiedArray，它们都是LDAP库的一部分。当我运行导入时，内存使用量最终达到超过1GB的峰值。如果问题存在，我需要找到一些方法来更正我的代
ruby-on-rails - Rails 3 中的多个路由文件 - 2
Rails2.3可以选择随时使用RouteSet#add_configuration_file添加更多路由。是否可以在Rails3项目中做同样的事情？最佳答案在config/application.rb中:config.paths.config.routes在Rails3.2(也可能是Rails3.1)中，使用:config.paths["config/routes"] 关于ruby-on-rails-Rails3中的多个路由文件，我们在StackOverflow上找到一个类似的问题
ruby-on-rails - 如何验证 update_all 是否实际在 Rails 中更新 - 2
给定这段代码defcreate@upgrades=User.update_all(["role=?","upgraded"],:id=>params[:upgrade])redirect_toadmin_upgrades_path,:notice=>"Successfullyupgradeduser."end我如何在该操作中实际验证它们是否已保存或未重定向到适当的页面和消息？最佳答案在Rails3中，update_all不返回任何有意义的信息，除了已更新的记录数(这可能取决于您的DBMS是否返回该信息)。http://ar.ru
ruby - 在 64 位 Snow Leopard 上使用 rvm、postgres 9.0、ruby 1.9.2-p136 安装 pg gem 时出现问题 - 2
我想为Heroku构建一个Rails3应用程序。他们使用Postgres作为他们的数据库，所以我通过MacPorts安装了postgres9.0。现在我需要一个postgresgem并且共识是出于性能原因你想要pggem。但是我对我得到的错误感到非常困惑当我尝试在rvm下通过geminstall安装pg时。我已经非常明确地指定了所有postgres目录的位置可以找到但仍然无法完成安装:$envARCHFLAGS='-archx86_64'geminstallpg--\--with-pg-config=/opt/local/var/db/postgresql90/defaultdb/po
ruby - 通过 rvm 升级 rubygems 的问题 - 2
尝试通过RVM将RubyGems升级到版本1.8.10并出现此错误:$rvmrubygemslatestRemovingoldRubygemsfiles...Installingrubygems-1.8.10forruby-1.9.2-p180...ERROR:Errorrunning'GEM_PATH="/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/ruby-1.9.2-p180@global:/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/rub
ruby-on-rails - Rails - 一个 View 中的多个模型 - 2
我需要从一个View访问多个模型。以前，我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它，但这似乎不是“ruby方式”，我将需要在不久的将来访问更多模型。这可能会变得很脏，是否有针对这种情况的任何技术？注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展，本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向，这似乎很麻烦。最终从任何
ruby-on-rails - Rails 3.2.1 中 ActionMailer 中的未定义方法 'default_content_type=' - 2
我在我的项目中添加了一个系统来重置用户密码并通过电子邮件将密码发送给他，以防他忘记密码。昨天它运行良好(当我实现它时)。当我今天尝试启动服务器时，出现以下错误。=>BootingWEBrick=>Rails3.2.1applicationstartingindevelopmentonhttp://0.0.0.0:3000=>Callwith-dtodetach=>Ctrl-CtoshutdownserverExiting/Users/vinayshenoy/.rvm/gems/ruby-1.9.3-p0/gems/actionmailer-3.2.1/lib/action_mailer
ruby-on-rails - Rails 应用程序中的 Rails : How are you using application_controller. rb 是新手吗？ - 2
刚入门rails，开始慢慢理解。有人可以解释或给我一些关于在application_controller中编码的好处或时间和原因的想法吗？有哪些用例。您如何为Rails应用程序使用应用程序Controller？我不想在那里放太多代码，因为据我了解，每个请求都会调用此Controller。这是真的？最佳答案 ApplicationController实际上是您应用程序中的每个其他Controller都将从中继承的类(尽管这不是强制性的)。我同意不要用太多代码弄乱它并保持干净整洁的态度，尽管在某些情况下ApplicationContr

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

预检请求

实例讲解

2023.02.04 更新

有关AJAX中的跨域(CORS) 问题 （更新于2023.02.04）的更多相关文章

随机推荐

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

有关AJAX中的跨域(CORS) 问题（更新于2023.02.04）的更多相关文章