http-web先后端的跨域

本文详见

• 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