摘要：本文详见文件夹提供主服务开启服务提供一个静态容器开启服务文件夹客户端页面，发送或者浏览器跨域相关跨域是为了保证服务端的安全，不允许随便的请求，这是浏览器的安全行为和不同域，浏览器并不知道映射到的是，所以认为他们不同域普通跨域之当浏览
本文详见
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
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/99719.html
摘要：所以单页应用的部署，需要将所有的页面请求都返回，浏览器下载了后会自动解析并导航到对应页面。总结单页应用与以前的常规多页面应用还是有区别的，开发过程与后端解耦了，同时会出现跨域鉴权以及应用部署的问题。 本文同步发布于我的个人博客上 - 单页应用的部署方案 本文主要简单讲一下单页应用的开发及部署方法，默认你懂一些服务端知识及nginx知识，如果有任何可以在下方评论留言。 单页应用 SPA（...
摘要：反向代理前后端联调跨域什么是跨域跨域，指的是浏览器不能执行其他网站的脚本。这时候，用反向代理实现跨域，是最简单的跨域方式。 keywords： Nginx反向代理 前后端联调 跨域 1.什么是跨域 跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。 所谓同源是指，域名，协议，端口都相同。浏览器执行javascrip...
摘要：想看重点的直接挪到文章底部，反向代理的配置跨域涉及到前后端开发的项目中，不可避免的涉及到了跨域的问题。浏览器的同源策略会导致跨域，这里同源策略又分为以下两种同源策略禁止对不同源页面进行操作。同源策略禁止使用对象向不同源的服务器地址发起请求。 想看重点的直接挪到文章底部，nginx反向代理的配置 跨域 涉及到前后端开发的项目中，不可避免的涉及到了跨域的问题。跨域，指的是浏览器不能执行其他...
摘要：想看重点的直接挪到文章底部，反向代理的配置跨域涉及到前后端开发的项目中，不可避免的涉及到了跨域的问题。浏览器的同源策略会导致跨域，这里同源策略又分为以下两种同源策略禁止对不同源页面进行操作。同源策略禁止使用对象向不同源的服务器地址发起请求。 想看重点的直接挪到文章底部，nginx反向代理的配置 跨域 涉及到前后端开发的项目中，不可避免的涉及到了跨域的问题。跨域，指的是浏览器不能执行其他...
阅读 3027·2023-04-25 18:06
阅读 3272·2021-11-22 09:34
阅读 2857·2021-08-12 13:30
阅读 2045·2019-08-30 15:44
阅读 1660·2019-08-30 13:09
阅读 1630·2019-08-30 12:45
阅读 1715·2019-08-29 11:13
阅读 3608·2019-08-28 17:51
