ajax-cors跨域设置Access-Control-Allow-Origin... / 设置cookie三点要素 / axios后端代理

CORS跨域设置

CORS(Cross-origin resource sharing),跨域资源共享,是一份浏览器技术的规范,用来避开浏览器的同源策略

简单来说就是解决跨域问题的除了jsonp外的另一种方法;比jsonp更加优雅。

options是浏览器默认行为,表示的是非简单请求,会请求两次

写在app use里可以成为公用,不用每个router都添加cors

1.('Access-Control-Allow-Origin', '*')          Origin源头,这个表示任意域名都可以访问,默认不能携带cookie了。(必须字段)

                                                                                    *通配符,表示所有网址都可以跨域请求,一般不这样写,写个指定网址

            res.header('Access-Control-Allow-Origin', 'http://www.baidu.com');         //这样写,只有www.baidu.com 可以访问。


2.Access-Control-Allow-Credentials:布尔值          Credentials资格,true允许携带cookie;(可选字段)

       客户端设置允许携带用户凭证(写在客户端html)

            xhr.withCredentials = true;

       服务端设置允许携带cookie(写在服务器js)

            ctx.set("Access-Control-Allow-Credentials",true);


3.Access-Control-Allow-Headers            允许设置的头部信息

("Access-Control-Allow-Headers","Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild")


4.Access-Control-Allow-Methods            设置允许请求的Methods方法

            res.header('Access-Control-Allow-Origin', '*');                 //这个表示任意域名都可以访问,这样写不能携带cookie了。

            res.header('Access-Control-Allow-Origin', 'http://www.baidu.com');                 //这样写,只有www.baidu.com 可以访问。

            res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');

            res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');            //设置方法,允许的方法,没有写就不允许


5.Access-Control-Expose-Headers             允许客户端获取的Headers头部key

CORS请求时,`XMLHttpRequest`对象的`getResponseHeader()`方法只能拿到6个基本字段:`Cache-Control`、`Content-Language`、`Content-Type`、`Expires`、`Last-Modified`、`Pragma`。如果想拿到其他字段,就必须在`Access-Control-Expose-Headers`里面指定。


预检请求(非简单请求,请求两次)

                  下面是简单的请求直接发送

                          GET

                          HEAD

                          POST

                          content-type

                          text/plain

                          multipart/form-data

                          application/x-www-form-urlencoded

                  下面是预检请求

                          PUT

                          DELETE

                          CONNECT

                          OPTIONS

                          TRACE

                          PATCH


设置cookie

        1.要在服务器头部中允许携带凭证

        2.设置cookie

        3.前端设置允许凭证


Access-Control-Max-Age用来指定本次预检请求的有效期,单位为秒,,在此期间不用发出另一条预检请求。(预检请求)

        发送预检请求


axios后端代理

        npm i axios -s

利用 koa-server-http-proxy中间件实现代理

            app.use(koaServerHttpProxy('/api', {

                target: 'http://localhost:4000',

                pathRewrite: { '^/api': '' }

跨域是浏览器规范,通过同服务器请求数据,不通过浏览器请求,也能解决浏览器限制;

流程:

3000html先请求自己getData接口--->3000js通过axios转发到4000js--->4000js结果返还到3000js.res--->3000js.res返还到3000html


©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,457评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,837评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,696评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,183评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,057评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,105评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,520评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,211评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,482评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,574评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,353评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,213评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,576评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,897评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,489评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,683评论 2 335

推荐阅读更多精彩内容