本文详见

• github: https://github.com/captainJac…

server文件夹

server.js 供应主server api效劳

node server/server.js 开启效劳

staticServer.js 供应一个静态html容器

node server/staticServer.js 开启效劳

www文件夹

cross-domain.html 客户端页面，发送XHR或许fetch

浏览器跨域相干

跨域是为了保证效劳端的平安，不许可随意的要求，这是浏览器的平安行动

tips

localhost和127.0.0.1差别域，浏览器并不晓得localhost映射到的是127.0.0.1，所以以为他们差别域

一般跨域之Access-Control-Allow-Origin

当浏览器涌现跨域报错时，==实在效劳器的响应已抵达浏览器了==，只不过浏览器会对照要求的头信息，对照当前域是不是是被Access-Control-Allow-Origin头信息许可的，假如不许可，则提醒报错

JSONP

关于link,script,image等标签src或ref是能够拿到非同域的资本，js动态建立script标签则可获取到数据，这个不须要后端支撑

CORS预要求&&跨域

敲黑板：Access-Control-Allow-Origin并不能完整支撑跨域，另有其他限定，比方运用fetch，有些自定义头信息，超越许可局限的要领等，在跨域的时刻，都是不被许可的

预要求

在以下许可局限以外的，都须要经由过程预要求的考证&&一些限定

• 许可要领

  • GET
  • POST
  • HEAD

• 许可Content-Type

  • text/plain
  • multipart/form-data
  • application/x-www-form-urlencoded
• 要求头限定，检察官方文档吧
• XMLHttpRequestUpload对象均没有注册任何时候监听器
• 要求中没有运用ReadableStream对象

预要求依据什么来推断这个要求是不是是被许可的呢 – Response Headers信息，浏览器读取Response Headers信息来晓得当前要求是不是是被许可的

关于CORS跨域，限定前提有许多，以下，这些在限定前提以内才能够许可

• 自定义的要领
• Content-Type
• 头信息
• … 详见官方文档

以自定义头信息举例

前端

fetch('http://127.0.0.1:8887', {
  method: 'POST',
  // 此处增加一条自定义头信息
  headers: {
    'X-Test-Cors111': 'test'
  }
})

后端

response.writeHead(200, {
  'Access-Control-Allow-Origin': '*',
})

此时浏览器提醒正确的响应的报错

此时后端须要以下，许可这类自定义头信息，才能够能够一般返回

response.writeHead(200, {
  'Access-Control-Allow-Origin': '*',
  'Access-Control-Allow-Headers': 'X-Test-Cors111'
})

同理，另有以下其他的限定

• ‘Access-Control-Allow-Headers’: ‘X-Test-Cors111’ //针对自定义头信息
• ‘Access-Control-Allow-Methods’: ‘PUT, DELETE’, // 针对自定义要领
• ‘Access-Control-Max-Age’: ‘1000’, // Access-Control-Max-Age：当前要求下面，以上述情势要求许可跨域的，1000s以内不须要发送预要求来考证了，直接提议正式的要求即可

tips:

chrome devTools有时刻会不提醒options预要求的XHR？发送options预要求的不好考证

检察细致的http要乞降响应的内容: curl -v www.baidu.com