一次跨域请求出现 OPTIONS 请求的问题及解决方法

余学文发布于2019-08-23 11:29 / 770人阅读

摘要：实际使用时，由于向提交的长度限制在字符，超过了则被浏览器拒绝，因此不采用。前端发起跨域请求就是正常的请求即可。

问题背景
浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域
在前后端开发过程经常会遇到跨域问题。网上也都有解决方案。

写这篇文章时，我们碰到的一个场景是：要给s系统做一个扩展，前端的html、js放在s系统里，后端需要做一个多带带的站点N.B.com。这就导致了跨域问题，大多数时候前后端用一个CORS方案解决跨域问题就可以了。但是我这次有点特别。

前端这边是一个get请求，按理说也没啥，但是在请求的header里面要添加两个自定义的header

  GET http://localhost:8080/api/v1/users
  Accept: */*
  Content-Type: application/json
  Authorization: token:21232f297a57a5a743894a0e4a801fc3
  Username: admin

增加了两个自定义字段 Authorization和Username
在请求时我看到 network里面出现了两次请求记录第一次是一个 OPTION请求状态码200第二次是我的get请求状态码 401

可以这边后端已经做了CORS处理。为何还出现这种情况呢。
我们一般在项目里解决跨域问题简单说会采取方案有

使用ajax直接跨域访问

2.使用JsonP。实际使用时，由于JsonP向Server提交URL的长度限制在8000字符，超过了则被浏览器拒绝，因此不采用。

对于第一种方案，后端需要做的工作是：
接口允许允许跨域请求：

header("Access-Control-Allow-Origin:*");  //支持全域名访问，不安全，部署后需要限制为R.com
header("Access-Control-Allow-Methods:POST,GET,OPTIONS,DELETE"); //支持的http动作
header("Access-Control-Allow-Headers:x-requested-with,content-type");  //响应头 请按照自己需求添加。

前端发起跨域请求：就是正常的$.ajax请求即可。我的项目用的vue全家桶用的axios 发送的请求

// request拦截器
service.interceptors.request.use(
  config => {
    if (store.getters.token) {
      config.headers["Authorization"] =`token:${getToken()}` 
      config.headers["Username"] =`getUsername()`
    }
    return config
  },
  error => {
    // Do something with request error
    Promise.reject(error)
  }
)

但是，碰到个问题，国内网站基本没有讲，就是option请求问题。

在正式跨域的请求前，浏览器会根据需要，发起一个“PreFlight”（也就是Option请求），用来让服务端返回允许的方法（如get、post），被跨域访问的Origin（来源，或者域），还有是否需要Credentials(认证信息）
三种场景：

如果跨域的请求是Simple Request（简单请求），则不会触发“PreFlight”。Mozilla对于简单请求的要求是：

以下三项必须都成立：

只能是Get、Head、Post方法

除了浏览器自己在Http头上加的信息（如Connection、User-Agent），开发者只能加这几个：Accept、Accept-Language、Content-Type、。。。。

Content-Type只能取这几个值：

application/x-www-form-urlencoded
multipart/form-data
text/plain

XHR对象对于HTTP跨域请求有三种：简单请求、Preflighted 请求、Preflighted 认证请求。简单请求不需要发送OPTIONS嗅探请求，但只能按发送简单的GET、HEAD或POST请求，且不能自定义HTTP Headers。Preflighted 请求和认证请求，XHR会首先发送一个OPTIONS嗅探请求，然后XHR会根据OPTIONS请求返回的Access-Control-*等头信息判断是否有对指定站点的访问权限，并最终决定是否发送实际请求信息。
那么我的get请求呢？
原来，产生 OPTIOINS 请求的原因是：自定义 Headers 头信息导致的。
浏览器会去向 Server 端发送一个 OPTIONS 请求，看 Server 返回的 "Access-Control-Allow-Headers" 是否有自定义的 header 字段。因为我之前没有返回自定义的字段，所以，默认是不允许的，造成了客户端没办法拿到数据。

那么这样的话如果后端是python的话

from corsheaders.defaults import default_headers

CORS_ALLOW_HEADERS = default_headers + (
    "Authorization,Username"
)

前端这边如果用的vue全家桶可以这样搞一下

module.exports = {
    NODE_ENV: ""development"",
    ENV_CONFIG: ""dev"",
    BASE_API: ""/proxy""
}

      "/proxy": {
        target: "http://jupiter.dev.grdoc.org/",
        changeOrigin: true,
        pathRewrite: {
          "^/proxy": "/"
        },
        sesure:false
      }

开发环境这样搞一下应该就不算跨域了。

我是山豆我的gitHub

云服务器私有云 ajax请求跨域问题云服务器问题及解决方法 js请求数据遇到的问题吗跨域请求

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97043.html

Ajax跨域

摘要：发布自的博客，欢迎大家转载，但是要注意注明出处。另外，该文章收纳在的个人的知识整理仓库，欢迎投稿跨域简介常用跨域方法跨域简介所谓跨域指的是请求从其他的域获取数据或者传输数据所谓域同源，指的是两个服务器资源的根的域名端口协议三者完全相同，只要发布自Kindem的博客，欢迎大家转载，但是要注意注明出处。另外，该文章收纳在Kindem的个人的 IT 知识整理仓库，欢迎 Star、Fork、...

xiaotianyi 2019-08-23 11:36 评论0 收藏0
九种 “姿势” 让你彻底解决跨域问题

摘要：什么是跨域当协议域名端口号，有一个或多个不同时，有希望可以访问并获取数据的现象称为跨域访问，同源策略限制下都是不支持跨域的。命名是随意的，只要是符合一级域名与二级域名的关系即可，然后访问。 showImg(https://segmentfault.com/img/remote/1460000018998493); 阅读原文同源策略同源策略/SOP（Same origin pol...

charles_paul 2019-08-23 12:18 评论0 收藏0
大话javascript 5期：跨域

摘要：同源策略所谓同源是指协议，域名，端口均相同。同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。需注意的是由于同源策略的限制，所读取的为跨域请求接口所在域的，而非当前页。一、什么是跨域 1.URL解析 URL （Uniform Resource Locator ）统一资源定位符（URL）是用于完整地描述Internet上网页和其他资源的地址的...

jzzlee 2019-08-23 16:42 评论0 收藏0
Fetch&CORS的简单实验

摘要：服务器确认允许之后，才发起实际的请求。在预检请求的返回中，服务器端也可以通知客户端，是否需要携带身份凭证包括和认证相关数据。提供了一个接口，用于访问和操纵管道的部分，例如请求和响应。专业的说，完成了一次简单请求。概念 CORS, Cross-origin resource sharing 跨域资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些源站有权限访问哪些资源。另外，...

Zack 2019-08-22 11:19 评论0 收藏0
前端常见跨域解决方案（全）

摘要：需注意的是由于同源策略的限制，所读取的为跨域请求接口所在域的，而非当前页。目前，所有浏览器都支持该功能需要使用对象来支持，也已经成为主流的跨域解决方案。反向代理接口跨域跨域原理同源策略是浏览器的安全策略，不是协议的一部分。什么是跨域？跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。广义的跨域： 1.) 资源跳转： A链接、重定向、表单提交 2.) 资源...

canger 2019-07-25 15:04 评论0 收藏0