博客
关于我
前端提高篇(115):简单了解CORS跨域资源共享
阅读量:142 次
发布时间:2019-02-26

本文共 1371 字,大约阅读时间需要 4 分钟。

跨域资源共享(CORS)详解

跨域资源共享(CORS)是一种允许不同域名或子域名之间进行资源交互的技术,通过设置特定的HTTP首部字段来实现。这种机制解决了传统的AJAX请求中跨域问题,特别是在JSONP的局限性无法支持所有HTTP方法的情况下。

CORS的基本概念

CORS的核心机制是通过HTTP请求头中的Access-Control-Allow-Origin字段来指定允许请求的来源。当服务器接收到一个请求时,会检查请求头中的Origin字段。如果该字段的值与服务器配置的允许来源一致,才会继续处理请求;否则,浏览器会阻止该请求。

AJAX请求在不符合CORS条件时,会被浏览器拦截并报错,提示“No 'Access-Control-Allow-Origin' header is present on the requested resource”。为了防止这种情况,服务器需要正确配置CORS响应头。

配置CORS响应头

在PHP文件中,可以通过添加以下代码来启用CORS:

header('Access-Control-Allow-Origin:*');header('Access-Control-Allow-Method: POST, GET, OPTIONS');header('Access-Control-Allow-Header: Content-Type, X-User');header('Access-Control-Allow-Max-Age: 86400');

*表示允许所有域名访问资源,但也可以指定特定的域名。默认情况下,只有与服务器相同的域名才能访问资源。

CORS的分类

CORS请求可以分为两种类型:简单请求和预检请求。

简单请求

简单请求包括以下HTTP方法:GET、POST、HEAD。这些方法在未设置CORS限制时,浏览器会自动允许,除非服务器禁止了该域名。

预检请求

预检请求通过HTTP OPTIONS方法向服务器询问支持的HTTP方法和首部字段。服务器如果允许,会返回相应的CORS响应头,并允许后续的实际请求。

预检请求的条件

服务器需要发送预检响应的条件包括:

  • 请求方法为POST、PUT、DELETE等非简单方法
  • 请求内容类型不为text/plainmultipart/form-dataapplication/x-www-form-urlencoded
  • 请求头中包含额外的首部字段(如X-User
  • 实际应用中的CORS配置

    在实际项目中,除了允许所有来源外,通常会针对特定首部字段进行限制。例如:

    header('Access-Control-Allow-Origin:*');header('Access-Control-Allow-Method: POST, GET, OPTIONS');header('Access-Control-Allow-Header: Content-Type, X-User');header('Access-Control-Allow-Max-Age: 86400');

    总结

    CORS是一种简便且强大的跨域解决方案,通过配置服务器响应头即可实现对不同域名的资源访问控制。理解并正确配置CORS,对于构建高效且稳定的前后端应用至关重要。

    转载地址:http://pspk.baihongyu.com/

    你可能感兴趣的文章
    No Feign Client for loadBalancing defined. Did you forget to include spring-cloud-starter-loadbalanc
    查看>>
    No mapping found for HTTP request with URI [/...] in DispatcherServlet with name ...的解决方法
    查看>>
    No mapping found for HTTP request with URI [/logout.do] in DispatcherServlet with name 'springmvc'
    查看>>
    No module named 'crispy_forms'等使用pycharm开发
    查看>>
    No module named cv2
    查看>>
    No module named tensorboard.main在安装tensorboardX的时候遇到的问题
    查看>>
    No module named ‘MySQLdb‘错误解决No module named ‘MySQLdb‘错误解决
    查看>>
    No new migrations found. Your system is up-to-date.
    查看>>
    No qualifying bean of type XXX found for dependency XXX.
    查看>>
    No resource identifier found for attribute 'srcCompat' in package的解决办法
    查看>>
    no session found for current thread
    查看>>
    No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android
    查看>>
    NO.23 ZenTaoPHP目录结构
    查看>>
    NO32 网络层次及OSI7层模型--TCP三次握手四次断开--子网划分
    查看>>
    NoClassDefFoundError: org/springframework/boot/context/properties/ConfigurationBeanFactoryMetadata
    查看>>
    Node JS: < 一> 初识Node JS
    查看>>
    Node-RED中使用JSON数据建立web网站
    查看>>
    Node-RED中使用json节点解析JSON数据
    查看>>
    Node-RED中使用node-random节点来实现随机数在折线图中显示
    查看>>
    Node-RED中使用node-red-browser-utils节点实现选择Windows操作系统中的文件并实现图片预览
    查看>>