浏览器 跨域

产生

• a页面想要获取b页面资源
• a b页面的协议、域名、端口号、子域名不同

解决

• http-proxy-middleware
  • src\setupProxy.js
    • createProxyMiddleware
      • target: 'www.jianshu.com/asimov',
      • changeOrigin: true,
      • ws: true,
      • pathRewrite: { '^/jian': '' },
  • 项目配置及准备 - 掘金 (juejin.cn)
• package.json 里面增添 proxy:""，但是只能单一代理
• CORS
  • 基本思想：使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功，还是应该失败

• web sockets
  • web sockets是浏览器的一种API
  • 在一个单独的持久连接上提供全双工、双向通信
  • 同源策略对web sockets不适用
  • 原理：在JS创建了web socket后，会有一个HTTP请求发送到浏览器以发起连接。取得服务器响应后，建立的连接会使用HTTP升级从HTTP协议交换为web sockt协议

JSONP跨域解决方案的底层原理

• 工作原理

由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源

Web页面上调用js文件时则不受是否跨域的影响，而且拥有”src”这个属性的标签都拥有跨域的能力，比如、、

 通过使用html的script标记来进行跨域请求，利用

在跨域的服务端生成JSON数据，然后包装成script脚本回传

• 图

• 客户端

script 请求后台 url，添加到body到节点就能请求到

• 后台

• 基于iframe的跨域解决方案

window.name

document.domin

location.hash

post message

• CORS跨域资源共享

response的头，浏览器通过这个判断

容器化保证版本一致

• 客户端

• 服务器端

• 基于http proxy实现跨域请求

package.json

"proxy":"http://127.0.0.1:9999"

• nginx反向代理

www.baidu.com/index.html需要调用www.sina.com/server.php

可以写一个接口www.baidu.com/server.php

由这个接口在后端去调用www.sina.com/server.php并拿到返回值

再返回给index.html （移动端调试常用）

• PHP端修改header

header(‘Access-Control-Allow-Origin:*’);//允许所有来源访问

　　header(‘Access-Control-Allow-Method:POST,GET’);//允许访问的方式