vue项目CORS跨域请求500错误,post请求变options请求

2020-12-02 17:53:54 阅读 0评论 2

温馨提示:

最后更新时间2020-12-02 17:53:54,若内容或图片失效,请留言反馈!

vue项目CORS跨域请求500,post请求变options请求,到底是什么情况。

提示:以下内容是一个非专业开发的我对跨域的理解,并不10分准确。

 

vue项目CORS跨域请求500,post请求变options请求

 

一、先介绍为什么明明发送的是Post请求,为什么到服务器端就收到了Options请求,到底是谁在中间搞鬼。

要说明这个问题,要先搞明白什么是跨域

跨域,就是不同源的网站之间想要传输内容,要解决的问题,全称叫”跨域资源共享“,也称CORS,不同源是指:协议(http,https)、端口、主域不同的站。举例说明下:

1、https://www.linyufan.com/html/和https://www.linyufan.com/ex/index/就是同源。

2、http://www.linyufan.com和https://www.linyufan.com不同源,协议不同,端口也不同,http是80,https是443端口。

3、https://www.zacseo.cn和https://www.linyufan.com不同源,主域不一样,即域名不一样。

同源还是不同源,差不多就是这个意思,只要是不同源,就需要解决”跨域“问题。

 

二、跨域请求

既然是跨域请求了,就分两类:1、简单请求,2、非简单请求,只要满足下面的几类,就是简单请求,否则就不是简单请求了。

(1) 请求方法是以下三种方法之一:HEAD、GET、POST

(2)HTTP的头信息不超出以下几种字段:Accept、Accept-Language、Content-Language、Last-Event-ID
Content-Type:只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
 
三、跨域流程
 
1、简单请求
 
浏览器小伙发出跨域请求,方式(Method)可能是Post,也可能是Get,再带上Headers信息,问题服务器想要一个资源,服务器一看,哦?小伙子不错,知道行内规矩。
 
这么着吧,你等下,给浏览器小伙发一条响应头,包含我服务器可以接受哪些请求,以什么方式等等。
 
然后告诉浏览器小伙,说我看看你请求的资源(包含不限于图片、css、js等静态资源,动态的另说),服务器开上自己的Apache或者Nginx小跑车,一路小跑,从这个文件夹跑到那个文件夹,收集够了浏览器小伙请求的资源后,挨个将这些资源发给浏览器小伙,浏览器小伙完成前端页面渲染和加载。
 
当然这个过程是极其快速及复杂的,还有Cookies、Session,Keep-live等,都需要商量,或者设置好。
 
总结跨域简单请求就是,一切符合服务器请求规范的,都会立马提供服务。
 
2、非简单请求
 
除了上面说的简单请求,另一个类型就是非简单请求,只要请求方式不是上面说的几种,Content-Type也不是上面说的几类,比如像自己加了Headers这些,都会触发浏览器进行非简单请求。也就是会出现Options请求。
 
Options请求,也叫预检请求,下面简单说说流程。
 
你在浏览器输入了一个网址,浏览器一看,里面有一些非简单请求的信息,于是乎本着谨慎的态度向服务器先发了一条Options的请求,试探性的问问服务器大哥这个请求可行不?
 
同时携带【'access-control-request-headers',access-control-request-method】等请求信息,告诉服务器想这么来。
 
服务器老哥一看,哟,小伙子牛啊,自定义了Headers里的信息,牛归牛,还是得按规矩来。检查了一下自己的笔记本,老板(我)允许这么请求,这个时候我们就看到了Options的响应头信息,里面有可以请求的类型,方式以及域等信息。
 
接下来浏览器小伙一看,知道了,就按你说的来,于是发送第二波请求,这个时候才是我们要想发送的请求,可能是Post或者Get等。
 
关于跨域的两种请求方式,大概就是这么个意思,具体的理解按这个介绍来:http://www.ruanyifeng.com/blog/2016/04/cors.html,人家写得比较专业。
 
知道问题出在哪里,就有对应的解决办法了。
 
四、CORS跨域Post请求变OPTIONS解决办法
 
1、将非简单请求改为简单请求,但这个办法好像不是太可行,毕竟我们自己加了Headers,就要发挥作用。
 
2、将后端请求到的OPTIONS忽略,或者做些别的用处。
 
3、牛B的解决办法(我不是很清楚,肯定有)。
 
以上是我看一些对于CORS介绍的文档,根据自己的理解写的,年纪大了,也静不下心来研究其所以然了,已经错过了埋头深干的劲了,只想着赶紧解决问题,其实还是有很多问题,不是很明白。
 
比如,为什么浏览器先发一次OPTIONS请求?为什么在跨域的情况下,不同的浏览器返回的信息提示不一样?
 
 
文章版权声明:除非注明,否则均为林羽凡原创文章,转载或复制请以超链接形式并注明出处。
林羽凡

林羽凡V

林羽凡博客,是一个记录自己生活、互联网技术的原创独立博客 Linyufan.Com

4259 文章
16539 评论
20844315 浏览

了解一下?

  • 了解一下?

优质服务器推荐

  • 软云_RuanCloud

活跃朋友

  • obaby(47)obaby
  • 粽叶加米(55)粽叶加米
  • jeffer.z的博客(45)jeffer.z的博客
  • dujun(95)dujun
  • Net(3)Net
  • 2broear(179)2broear
  • 拾风(139)拾风
  • 老张博客(234)老张博客
  • 紫慕(266)紫慕
  • 段先森(154)段先森
  • 网友小宋(68)网友小宋
  • 两对半(13)两对半
  • 梦不见的梦(27)梦不见的梦
  • Dabenshi(32)Dabenshi
  • 老麦(225)老麦
  • sagrre(21)sagrre

最新留言

    @ 林羽凡还好,还好。问题不大,下雨什么的也没什么感觉
    obaby • 时间 1天前
    摔提挺严重呀。祝早日康复!:heo-感动:
    粽叶加米 • 时间 2024年03月26日 11:47:30
    这一看就好痛,本好奇宝宝曾经让汽修厂的升降机烟断过脚趾头。单腿蹦哒了三个月。:heo-泪奔:
    obaby • 时间 2024年03月26日 10:47:39
    @ 林羽凡开玩笑的,不会跑,我被cc,还是他给我解决的,当然备份还是必须的。数据安全第一,用谁的服务器都得备份。
    jeffer.z的博客 • 时间 2024年03月26日 09:12:10
    我也是软云????,一夜之间都在用,这要是jun跑路了,他就在博客圈火了,明天我也写一篇我和他的事情,很有意思。
    jeffer.z的博客 • 时间 2024年03月25日 23:30:05
    这得好好休息一段时间了
    dujun • 时间 2024年03月25日 21:29:29
    也是蛮厉害的人,完骑车才骑十多公里。
    惭愧呀,我得慢慢努力啦。
    争取早日摆脱菜腿称号。:heo-笑哭:
    Net • 时间 2024年03月25日 17:17:13
    我天 得多痛:heo-泪奔:... 祝早日康复
    2broear • 时间 2024年03月25日 10:42:00
    少码点代码,多回家看看
    拾风 • 时间 2024年03月25日 09:29:26
    你这个做哥哥的,都十来天了才知道。
    老张博客 • 时间 2024年03月25日 08:40:34
    年轻恢复还是很快的,高中手骨折过,一个月拆石膏。现在虽然没有大问题,但总感觉稍稍有些不自然。
    紫慕 • 时间 2024年03月24日 23:33:19
    看的真疼,得打石膏啊
    段先森 • 时间 2024年03月24日 18:26:18

再了解一下?

  • 林羽凡待办
取消
支付宝二维码
支付宝二维码
微信二维码