JS请求跨域问题及URL的结构分析
1.URL结构分析
以下面地址为例: http://www.aespxfans.com.cn:8080/news/index.aspboardId=5&Id=24618&page=1&pageNum#name
URL组成包括:协议,域名,端口,路径组成。
从上面的URL可以看出:
①协议部分:该URL协议部分是“http:”,在互联网(Internet)中还有多种协议,例如HTTP,HTTPS,FTP等等,跟在HTTP后的双斜杠不是协议组成部分,这“//”是与域名或者IP地址分隔符。
②域名部分:“www.aespxfans.com.cn”是域名部分,在URL中还可以使用IP地址表示。
③端口部分:8080是该URL的端口,端口不是必须部分,如果省略则访问默认的端口。
④路径部分:端口后面表示路径组成部分。
2 .同源问题
如果两个URL协议,域名,端口相同则表示同源。
- 跨域问题
跨域,指的是浏览器不能执行其他网站的脚本。同源策略规定,AJAX 请求只能发给同源的网址,否则就报错。
跨域请求通常不会携带 cookies 信息,为了能让跨域请求带上 cookies,需要在前端设置:
xhr.withCredentials = true
这个配置需要后端的配合,需要在服务器端在响应是带上 Access-Control-Allow-Credentials , 同时它的值必须为 true:
Access-Control-Allow-Credentials: true
设置 withCredentials 为true 后, 在与服务器进行通信时会携带这个域名下的所有 cookies。
4.参考资料
https://www.extlight.com/2017/09/26/%E8%AE%B0%E4%B8%80%E6%AC%A1%E8%B7%A8%E5%9F%9F%E9%97%AE%E9%A2%98%E7%9A%84%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/