面题系列：跨域问题

jsmask
157 阅读3分钟

Offer 驾到，掘友接招！我正在参与2022春招打卡活动，点击查看活动详情。

题目描述

相信你在平时的工作学习中一定会遇到跨域这种问题，你知道它是如何产生的吗？在开发环境中，你通常是如何解决这个问题的，可以说出几种来吗？

考察点

  1. 跨域同源策略的了解

  2. 服务代理的认识与操作

  3. jsonp的理解

解题思路

跨域同源策略

处于浏览器端出现的同源策略，它是浏览器最核心也最基本的安全功能。Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。它可以会阻止一个域的javascript脚本和另外一个域的内容进行交互。所以，跨域问题就是协议、域名、端口三者之间任意一个与当前页面url不同，而造成了无法访问其他域的这件事。

如何解决跨域问题

JSONP

  1. 在jquery时代，通过用jsonp的格式来解决一部分的跨域问题，而且对于低版本浏览器的兼容出奇的好。
  2. jsonp只能解决GET类型的ajax请求跨域问题，而无法解决POST类型的问题。
  3. jsonp请求不是ajax请求，而是一般的get请求。
  4. 基本原理：
    • 浏览器端：
      • 动态生成来请求后台接口（src就是接口的url）
      • 定义好用于接收响应数据的函数，并将函数名通过请求参数提交给后台
    • 服务器端：
      • 接收到请求处理产生的数据后，返回一个个函数调用的js代码，并将结果数据作为实参传入函数调用
    • 浏览器端：
      • 接收到响应自动执行函数调用的js代码，也就是执行了提前定义好的回调函数，并得到了需要的结果函数

代理服务

  1. devServer，在webpack的开发模式中可以是用他的代理服务来完成，这也是目前前端最流行的方案。
devServer: {
        open: true,
        host: 'localhost',
        port: 8080,
        https: false,
        hotOnly: false,
        proxy: {
            //配置跨域代理
            '/api': {
                target: "http://localhost:5000/api/",
                ws: true,
                changOrigin: true,
                pathRewrite: {
                    "^/api": ""
                }
            }
    },
    before: app => {}
}
  1. Nginx，反向代理服务器，既然是代理服务器那么自然也可以非常轻松的解决跨域问题。
location / {  
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';

    if ($request_method = 'OPTIONS') {
        return 204;
    }
}
  1. 浏览器插件，如谷歌商城里的Allow CORS插件等等，相当于也是做了代理完成。

CORS

CORS 是跨域资源分享（Cross-Origin Resource Sharing）的缩写。它是 W3C 标准，属于跨源 AJAX 请求的根本解决方法。

后端协助

服务器端可以通过设置Access-Control-Allow-Origin来进行允许Ajax进行跨域的访问。如果涉及到cookie跨域，则前后端设置withCredentials。

avatar
文章
阅读
粉丝