从输入URL到渲染的过程中到底发生了什么？

最新推荐文章于 2024-10-31 22:54:55 发布

loveX001

最新推荐文章于 2024-10-31 22:54:55 发布

阅读量68

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/loveX001/article/details/127507863

版权

浏览器有一个重要的安全策略，称之为「同源策略」

其中，源=协议+主机+端口，**两个源相同，称之为同源，两个源不同，称之为跨源或跨域

同源策略是指，若页面的源和页面运行过程中加载的源不一致时，出于安全考虑，浏览器会对跨域的资源访问进行一些限制

同源策略对 ajax 的跨域限制的最为凶狠，默认情况下，它不允许 ajax 访问跨域资源

所以，我们通常所说的跨域问题，就是同源策略对 ajax 产生的影响

有多种方式解决跨域问题，常见的有：

代理，常用
CORS，常用
JSONP

无论使用哪一种方式，都是要让浏览器知道，我这次跨域请求的是自己人，就不要拦截了。

跨域解决方法1-代理

对于前端开发而言，大部分的跨域问题，都是通过代理解决的

代理适用的场景是：生产环境不发生跨域，但开发环境发生跨域

因此，只需要在开发环境使用代理解决跨域即可，这种代理又称之为开发代理

在实际开发中，只需要对开发服务器稍加配置即可完成

// vue 的开发服务器代理配置
// vue.config.js
module.exports = {
   
  devServer: {
    // 配置开发服务器
    proxy: {
    // 配置代理
      "/api": {
    // 若请求路径以 /api 开头
        target: "http://dev.taobao.com", // 将其转发到 http://dev.taobao.com
      },
    },
  },
};

跨域解决方法2-JSONP

在CORS出现之前，人们想了一种奇妙的办法来实现跨域，这就是JSONP。

要实现JSONP，需要浏览器和服务器来一个天衣无缝的绝妙配合。

JSONP的做法是：当需要跨域请求时，不使用AJAX，转而生成一个script元素去请求服务器，由于浏览器并不阻止script元素的请求，这样请求可以到达服务器。服务器拿到请求后，响应一段JS代码，这段代码实际上是一个函数调用，调用的是客户端预先生成好的函数，并把浏览器需要的数据作为参数传递到函数中，从而间接的把数据传递给客户端