同源和跨域

发表于 2025-01-10 分类于 chore 本文字数： 370 阅读时长 ≈ 1 分钟

| 比较杂的知识点，同源跨域、服务器代理、简单请求非简单请求

同源和跨域

为什么要有同源策略

本质上是浏览器有cookie这么个玩意，比如移动端app就没有同源限制
防止CSRF攻击

如何解决跨域问题

jsonp

jsonp的原理就是利用<script>标签没有跨域限制，通过<script>标签src属性，发送带有callback参数的GET请求，服务端将接口返回数据拼凑到callback函数中，返回给浏览器，浏览器解析执行，从而前端拿到callback函数返回的数据。

function createScriptTag() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  // 设置请求的URL，假设服务端接口为http://example.com/api/data，同时指定回调函数名为handleData
  script.src = 'http://example.com/api/data?callback=handleData';
  document.body.appendChild(script);
}

// 定义回调函数
function handleData(data) {
  console.log(data);
  // 在这里可以对返回的JSON数据进行处理，如更新页面内容等
}

服务器会返回一个函数调用，类似于 handleData({"data": "value"}) 的内容

cors

| 本质上是通过服务端来允许
配置受信任的域名，允许受信任域名的跨域请求

简单请求

非简单请求

服务器代理

开发环境webpack-dev-server
生产环境nginx代理服务器部署在同源域名下，转发请求到对应的服务器上（当时配置：某个域名下的某个路径，关联到后端appkey上）

0%