跨域问题解决

keep one's resolveY

已于 2022-03-31 09:21:39 修改

阅读量1.6k

点赞数

分类专栏： SpringCloud 文章标签：前端

于 2022-03-08 13:44:53 首次发布

原文链接：https://blog.csdn.net/ZY_FlyWay/article/details/122514592?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~aggregatepage~first_rank_ecpm_v1~rank_v31_ecpm-3-122514592.pc_agg_new_rank&utm_term=%E8%B7%A8%E5%9F%9F%E6%98%AF%E5%89%8D%E7%AB%AF%E8%

版权

SpringCloud 专栏收录该内容

60 篇文章 9 订阅

订阅专栏

同源不同源一句话就可以判断：就是url中 scheme（协议）， host（域名）， port（端口）都相同即为同源。不同源就是出现跨域问题

前端解决办法：jsonp

后端解决办法：CORS

运维解决办法：ngnix

参考博客：

百度安全验证

别在问我跨域问题了，跨域详解以及前端、后端、运维解决的方法统统写在这里了。_星宇大前端-CSDN博客_跨域前端解决还是后端解决

前言

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

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

贴上标准的前端跨域报错(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.com	http 默认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

三、后端解决方案

一、注解@CrossOrigin解决跨域问题 - 淼淼之森 - 博客园（这是因为前端想直接调用我本地启动的后台独立微服务，不通过网关，发现直接的页面是走网关的，触发了浏览器同源策略，导致需要处理跨域，通过这个方法处理）

@CrossOrigin有2个参数：

origins ：允许可访问的域列表

maxAge：准备响应前的缓存持续的最大时间（以秒为单位）。

@CrossOrigin可以用在被RequestMapping修饰的方法和Controller类上。

@CrossOrigin注解被注解的方法或者类具备接受跨域请求的功能。默认情况下，它使方法具备接受所有域，所有请求消息头的请求，下面例子中，我们仅接受http://localhost:9000发送来的跨域请求。

用例：

 　@CrossOrigin(origins = "http://localhost:9000")
    @GetMapping("/greeting")
    public Greeting greeting(@RequestParam(required=false, defaultValue="World") String name) {
        System.out.println("==== in greeting ====");
        return new Greeting(counter.incrementAndGet(), String.format(template, name));
    }

二、

后端框架也很多，实现原理差不多，都是修改下相应头。以常用的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());

四、运维解决方案

（因为访问外部接口导致触发浏览器同源问题，我们需要配置proxy_pass,当我们走到监听的网址时，会帮我们转发到proxy_pass；这里工作中遇到的视频文件的跨域问题，使用root直接定位到本地路径，参见nginx学相伴博客）

运维解决我只会一点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

keep one's resolveY

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
跨域问题解决

同源不同源一句话就可以判断：就是url中 scheme（协议），host（域名）， port（端口）都相同即为同源。不同源就是出现跨域问题前端解决办法：jsonp后端解决办法：CORS运维解决办法：ngnix参考博客：百度安全验证别在问我跨域问题了，跨域详解以及前端、后端、运维解决的方法统统写在这里了。_星宇大前端-CSDN博客_跨域前端解决还是后端解决...
复制链接

扫一扫