别在问我跨域问题了,跨域详解以及前端、后端、运维解决的方法统统写在这里了。


前言

跨域问题一直是前端的一大难题,从前端出道到至今,无论是自己还是身边的同事,以及网上前端朋友都被这个问题困扰着。

尤其最近写了一个网络封装,用户提出最多的便是跨域问题,解释了很多次,都写在这里吧,以后自己忘了也可以看看,总结一下。

贴上标准的前端跨域报错(SpringBoot后台):

Access to XMLHttpRequest at '…' from origin '…' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

 

一、为什么会跨域


说到跨域不得不谈的就是浏览器的同源策略,跨域也是因为浏览器这个机制引起的,这个机制的存在还是在于安全。

1. 什么是源

Web内容的源由用于访问它的URL 的方案(协议),主机(域名)和端口定义。只有当方案,主机和端口都匹配时,两个对象具有相同的起源。

同源不同源一句话就可以判断:就是url中 scheme host port 都相同即为同源。

下面认识下url 结构中的这三个部分。

2. URL结构

URL 代表着是统一资源定位符(Uniform Resource Locator)。URL 无非就是一个给定的独特资源在 Web 上的地址。

URL有如下结构组成:

  • Schme 或者 Protocol

在这里插入图片描述

  • Domain Name 也叫做host域名

在这里插入图片描述

  • port 端口号

在这里插入图片描述

  • Parameters参数
    在这里插入图片描述

  • Anchor 锚点,一般用于定位位置
    在这里插入图片描述

3. 同源不同源举🌰

举一下同源不同源的例子,便于

同源例子
例子原因
http://example.com/app1/index.html http://example.com/app2/index.html相同的 scheme http 和host
http://Example.com:80 http://example.comhttp 默认80端口所以同源
不同源例子
例子原因
http://example.com/app1 https://example.com/app2不同的协议
http://example.com http://myapp.example.com不同的host
http://example.com http://example.com:8080不同的端口

4. 浏览器为什么需要同源策略

同源策略是一个重要的安全策略,它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档,减少可能被攻击的媒介。

5. 常规前端请求跨域

在没有前后端分离的时候,跨域问题往往是很少的。因为前后端都部署到一起。现在前后端分离不管vue /react 面临跨域请求的问题。

下面是引用官网描述的一张图来解释跨域:

在这里插入图片描述
跨源域资源共享(CORS)机制允许 Web 应用服务器进行跨源访问控制,从而使跨源数据传输得以安全进行。现代浏览器支持在 API 容器中(例如 XMLHttpRequest 或 Fetch)使用 CORS,以降低跨源 HTTP 请求所带来的风险。

 

二、前端解决方案


jsonp

JSONP的原理非常简单,就是HTML标签中,很多带src属性的标签都可以跨域请求内容,比如我们熟悉的img图片标签。同理,script标签也可以,可以利用script标签来执行跨域的javascript代码。通过这些代码,我们就能实现前端跨域请求数据。

jsonp 可以在前端解决跨域问题,但是只是针对于get请求。实现方式可以引用一些npm 第三方库实现,jquery 也是带的。

可以在npm 搜下jsonp 库实现,非常简单。

在这里插入图片描述

webpack-dev-server

前端无论是vue项目还是react 项目大多数都会以webpack-dev-server 来运行,webpack-dev-server 可以设置代理,前端可以在开发环境设置代理解决跨域问题。

 proxy: {
      '/api': {
        target: 'http://localhost:3000',
        pathRewrite: { '^/api': '' },
        changeOrigin: true,
      },
   }

vue-cli、create-react-app、umi 等脚手架找到webpack devserver配置位置配上即可。

注意: 只限在开发环境,生产环境需要web 服务器同样原理代即可。下面会说明怎么用。

document.domain

利用document.domain 可以修改 访问页面的域,多用在父子关系的域,子域可以设置document.domain等于父域,从而解决同父域跨域问题。

举例子:

www.ios.xingyu.com 访问 www.web.xingyu.com 跨域,可以利用 document.domain 设置成 www.xingyu.com

 

三、后端解决方案


后端框架也很多,实现原理差不多,都是修改下相应头。以常用的Java SpringCloud 和nodejs koa 框架为例。

Http 协议CORS头

跨域其实也是http层面上可以解决的问题,后端解决也是比较简单的,也是项目常见的解决手法。

CORS (Cross-Origin Resource Sharing,跨域资源共享)是一个系统,它由一系列传输的HTTP头组成,这些HTTP头决定浏览器是否阻止前端 JavaScript 代码获取跨域请求的响应。

同源安全策略 默认阻止“跨域”获取资源。但是 CORS 给了web服务器这样的权限,即服务器可以选择,允许跨域请求访问到它们的资源。

  • Access-Control-Allow-Origin
    指示请求的资源能共享给哪些域。
  • Access-Control-Allow-Credentials
    指示当请求的凭证标记为 true 时,是否响应该请求。
  • Access-Control-Allow-Headers
    用在对预请求的响应中,指示实际的请求中可以使用哪些 HTTP 头。
  • Access-Control-Allow-Methods
    指定对预请求的响应中,哪些 HTTP 方法允许访问请求的资源。
  • Access-Control-Expose-Headers
    指示哪些 HTTP 头的名称能在响应中列出。
  • Access-Control-Max-Age
    指示预请求的结果能被缓存多久。
  • Access-Control-Request-Headers
    用于发起一个预请求,告知服务器正式请求会使用那些 HTTP 头。
  • Access-Control-Request-Method
    用于发起一个预请求,告知服务器正式请求会使用哪一种 HTTP 请求方法。
  • Origin
    指示获取资源的请求是从什么域发起的。

SpringCloud设置跨域

在跨域过滤器里配置一下跨域头部,* 是通配符即允许所有。

@Configuration
public class GatewayCorsConfiguation {
 
    @Bean
    public CorsFilter corsFilter(){
        // 初始化cors配置对象
        CorsConfiguration configuration = new CorsConfiguration();
        configuration.setAllowCredentials(true); // 允许使用cookie,但是使用cookie是addAllowedOrigin必须是具体的地址,不能是*
//        configuration.addAllowedOrigin("*");
        configuration.addAllowedOrigin("http://manage.leyou.com");
        configuration.addAllowedMethod("*");  //允许的请求方式,get,put,post,delete
        configuration.addAllowedHeader("*");//允许的头信息
 
        //初始化cors的源对象配置
        UrlBasedCorsConfigurationSource corsConfigurationSource = new UrlBasedCorsConfigurationSource();
        corsConfigurationSource.registerCorsConfiguration("/**",configuration);
 
        //3.返回新的CorsFilter.
        return new CorsFilter(corsConfigurationSource);
    }
}

Koa设置跨域

koa 是插件机制,设置更简单,使用跨域插件即可。

import cors from "koa2-cors";
app.use(cors());

四、运维解决方案

运维解决我只会一点ngnix ,其他web 服务器就不说了,原理同webpack-dev-server 设置代理转发解决跨域问题。

步骤:

  • 前端和运维商量好协议路径代理规则,比如/api 代表域名
  • 前端配置webpack -dev -server 代理
  • 服务器利用ngnix 配置相同转发代理

ngnix 配置代理解决跨域配置:

...
location /api {
   proxy_pass https://b.test.com; # 设置代理服务器的协议和地址
}       
...

在这里插入图片描述

五、总结

在工作中,大多数还是利用后端或者ngnix 代理来解决,前端可以在开发中临时配置解决问题。

参考链接

  • https://developer.mozilla.org/zh-CN/docs/Glossary/CORS
  • https://developer.mozilla.org/zh-CN/docs/Glossary/Origin
  • https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

星宇大前端

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值