跨域

跨域

什么是跨域

跨域主要由于不符合浏览器的同源策略所产生的一种现象,同源策略属于浏览器的一种安全策略,其要求是所请求资源的协议、域名、端口号与当前页面完全一致,目的是为了保护本地数据不被请求获取的数据污染,如果缺少了同源策略,浏览器很容易受到XSS、CSRF等攻击,因此同源策略拦截的是请求返回来的数据,即服务器响应了,但是响应的结果被浏览器拦截了。

浏览器采用同源策略,在没有明确授权的情况下,禁止页面加载或执行与自身不同源的任何脚本。

同源策略限制的内容

  • cookie、localStorage、indexDB等存储性内容。cookie只和域名以及路径关联,localStorage则是以源为单位进行管理,相互独立
  • 禁止对不同源页面DOM进行操作,主要场景是iframe跨域
  • ajax请求前后端分离的情况

允许跨域加载资源的标签

  • img-src
  • link-href
  • script-src
  • iframe-src

常见的解决跨域的方法

  • JSONP(JSON with Padding)

    只支持get请求,利用了script标签可获取跨域资源的特点,可跨域的标签还有img、link、iframe、script等。

    具体操作:服务端的响应内容是js代码,返回的是函数调用,并把参数传递进去。浏览器对此代码进行解析并执行,对应的函数声明由前端自己定义。

  • CORS(Cross-Origin Resource Sharing)

    跨域资源共享是一种基于 HTTP 头的机制,该机制通过允许服务器标示除了它自己以外的其它(域、协议和端口),使得浏览器允许这些 origin 访问加载自己的资源。

    此机制新增了一组HTTP首部字段(header)来解决跨域问题,允许服务器声明哪些源站通过浏览器有权限访问哪些资源。

    这个方法主要需要后端接口做处理,使响应报文包含正确的CORS响应头,如:

    response.setHeader('Access-Control-Allow-Origin', '*'); // 允许的请求来源
    response.setHeader('Access-Control-Allow-Headers', '*'); // 允许携带的头信息,用于预检请求的响应
    response.setHeader('Access-Control-Allow-Methods', '*'); // 允许的请求类型,用于预检请求的响应
    response.setHeader('Access-Control-Expose-Headers', 'token'); // 允许浏览器可以拿到的自定义响应头
  • 代理跨域

    前端本地开发通常会使用这种解决跨域的方法。

    比如使用Webpack作为构建工具时,可以对devServer.proxy进行代理配置,使满足特定规则的请求,被转发到真实的接口地址,相当于给真实的接口做了一层代理。

    module.exports = {
      // ...
      devServer: {
        proxy: {
          '/api': {
            target: 'http://www.example.com',
            pathRewrite: {
              '^/api': ''
            }
          }
        }
      }
    };

    假设此时在A页面http://locahost:8080/index.html发起了一个请求http://localhost:8080/api/getList,请求实际会被转发至http://www.example.com/getList


LearnFE
探索 | Explore

工作多年的一只前端菜鸟

486 声望
409 粉丝
0 条评论
推荐阅读
从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木172阅读 13.8k评论 10

手把手教你写一份优质的前端技术简历
不知不觉一年一度的秋招又来了,你收获了哪些大厂的面试邀约,又拿了多少offer呢?你身边是不是有挺多人技术比你差,但是却拿到了很多大厂的offer呢?其实,要想面试拿offer,首先要过得了简历那一关。如果一份简...

tonychen152阅读 17.7k评论 5

封面图
正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青56阅读 8.4k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy48阅读 6.9k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木75阅读 7k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs42阅读 6.8k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木45阅读 8.5k评论 6

工作多年的一只前端菜鸟

486 声望
409 粉丝
宣传栏