一、问题

  服务器端代码

from flask import Flask
from flask import make_response
from flask import jsonify app = Flask(__name__) def cors_response(res):
response = make_response(jsonify(res))
response.headers['Access-Control-Allow-Origin'] = '*'
response.headers['Access-Control-Allow-Headers'] = 'content-type'
return response @app.route("/api/order", methods=['GET', 'POST', 'OPTIONS'])
def index():
print('request success')
return cors_response({'code': 0, 'data': 'success'}) if __name__ == '__main__':
app.run()

  axios请求代码

axios.post('http://127.0.0.1:5000/api/order',
{headers: {'Content-type': 'application/json', 'Access-Control-Allow-Origin': '*'}}
)

  运行结果

    服务器端控制台结果

    浏览器console控制台

二、CORS跨域原理

1.CORS简介

CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。因此,实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。

2.两种请求

浏览器将CORS请求分成两类:简单请求(simple request)和非简单请求(not-so-simple request)。

只要同时满足以下两大条件,就属于简单请求。

(1) 请求方法是以下三种方法之一:

  • HEAD
  • GET
  • POST

(2)HTTP的头信息不超出以下几种字段:

  • Accept
  • Accept-Language
  • Content-Language
  • Last-Event-ID
  • Content-Type:只限于三个值application/x-www-form-urlencodedmultipart/form-datatext/plain

凡是不同时满足上面两个条件,就属于非简单请求。

浏览器对这两种请求的处理,是不一样的。

三、错误分析及解决

上述请求为非简单请求,请求过程

  1. 正式通信前,会有一次HTTP查询请求,称为‘预检’请求(preflight)。预检请求用的方法是OPTIONS,与控制台的结果符合
  2. 服务器接收预检请求后,通过检查origin,Access-Control-Request-MethodAccess-Control-Request-Headers字段以后,确认允许跨源请求,就可以做出回应。
    1. 检查origin:response headers中的Access-Control-Allow-Origin的值是否包含发送请求的域名。

      Access-Control-Allow-Origin: * 表示同意任意跨域请求
    2. 检查Access-Control-Request-Method:它的值是逗号分隔的一个字符串,表明服务器支持的所有跨域请求的方法,由于此次请求的方法是POST,服务器默认支持,因此不需要设置
    3. 如果浏览器请求包括Access-Control-Request-Headers字段,则Access-Control-Allow-Headers字段是必需的。它也是一个逗号分隔的字符串,表明服务器支持的所有头信息字段,不限于浏览器在"预检"中请求的字段。由于以上例子的浏览器请求添加了自定义的Access-Control-Allow-Origin字段,所以需要将服务器端的
      response.headers['Access-Control-Allow-Headers'] = 'content-type' 改为
      response.headers['Access-Control-Allow-Headers'] = 'content-type, Access-Control-AllowOrigin'

参考:

跨域资源共享CORS详解

CORS跨域请求的更多相关文章

  1. Spring Boot Web应用开发 CORS 跨域请求支持:

    Spring Boot Web应用开发 CORS 跨域请求支持: 一.Web开发经常会遇到跨域问题,解决方案有:jsonp,iframe,CORS等等CORS与JSONP相比 1. JSONP只能实现 ...

  2. 4 伪ajax:jsonp、cors 跨域请求

    一.同源策略 https://www.cnblogs.com/yuanchenqi/articles/7638956.html 同源策略(Same origin policy)是一种约定,它是浏览器最 ...

  3. CORS跨域请求总结

    CORS跨域请求分为简单请求和复杂请求. 1. 简单请求: 满足一下两个条件的请求. (1) 请求方法是以下三种方法之一: HEAD GET POST (2)HTTP的头信息不超出以下几种字段: Ac ...

  4. CORS跨域请求规则以及在Spring中的实现

    CORS: 通常情况下浏览器禁止AJAX从外部获取资源,因此就衍生了CORS这一标准体系,来实现跨域请求. CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origi ...

  5. Java实现CORS跨域请求

    问题 使用前后端分离模式开发项目时,往往会遇到这样一个问题 -- 无法跨域获取服务端数据 这是由于浏览器的同源策略导致的,目的是为了安全.在前后端分离开发模式备受青睐的今天,前端和后台项目往往会在不同 ...

  6. CORS——跨域请求那些事儿

    在日常的项目开发时会不可避免的需要进行跨域操作,而在实际进行跨域请求时,经常会遇到类似 No 'Access-Control-Allow-Origin' header is present on th ...

  7. CORS跨域请求[简单请求与复杂请求]

    CORS即Cross Origin Resource Sharing(跨来源资源共享),通俗说就是我们所熟知的跨域请求.众所周知,在以前,跨域可以采用代理.JSONP等方式,而在Modern浏览器面前 ...

  8. CORS 跨域请求

    一.简介 CORS需要浏览器和服务器同时支持.目前,所有浏览器都支持该功能,IE浏览器不能低于IE10. 整个CORS通信过程,都是浏览器自动完成,不需要用户参与.对于开发者来说,CORS通信与同源的 ...

  9. CORS跨域请求C#版

    1.什么是跨域请求:  当从A网站使用AJAX请求B网站时,就会出现跨域请求. 此时B网站能够接收到A网站发来的请求并返回相应的结果,但是浏览器拿到B网站返回的数据时检测到与当前网站的域名不同,出于安 ...

随机推荐

  1. 动态HTMl处理

    后续爬虫代码的建议 尽量减少请求次数 1. 能抓列表页就不抓详情页 2. 保存获取的html页面,供差错和重复请求使用 关注网站的所有类型的页面 1. wap页面,触屏版页面 2. H5页面 3. A ...

  2. java对excel文件内容读写修改操作

    Read.java package domain; import java.io.FileInputStream; import java.io.InputStream; import jxl.Cel ...

  3. Android启动页欢迎界面大全 (网址)

    地址:http://download.csdn.net/detail/u013424496/9539810

  4. TX2-入门坑点-Ubuntu16.04任务栏消失

    问题:安装cuda过程中出现任务栏消失,快捷键失效的现象. 解决方法:重装桌面无法解决,使用cssm无法解决,最后删除home目录下的 .cache文件夹重启后解决

  5. CNPM 安装 for angularjs

    npm config set proxy=http://127.0.0.1:8087npm config delete proxynpm config set registry=http://regi ...

  6. 编写Shell脚本的最佳实践

    编写Shell脚本的最佳实践 http://kb.cnblogs.com/page/574767/ 需要记住的 代码有注释 #!/bin/bash # Written by steven # Name ...

  7. .net 程序加密

    .net 程序加密,一般是对生成的exe文件或者dll直接进行加壳,配合加密锁或者许可进行授权控制,既能保证安全性,又控制软件的使用. 加壳工具的选择 一般要考虑几点,第一是加壳的安全性,不能被轻易脱 ...

  8. 【Linux】-NO.86.Linux.6.C.1.001-【CentOS 7 Install GCC】-

    1.0.0 Summary Tittle:[Linux]-NO.86.Linux.6.C.1.001-[CentOS 7 Install GCC]- Style:Java Series:Log4j S ...

  9. larave----------通过composer.json下载laravel包----barryvdh/laravel-debugbar

    1.去Packagist网站https://packagist.org/packages/barryvdh/laravel-debugbar#dev-master找到

  10. DIV层的使用方法

    1.可以判断你选择的样式是否存在用下边的方法(如果存在的话执行某个方法) if ($(this).hasClass('cur')) 2.这个方法可以查询一个页面中同样的div层总共有几个 var i= ...