为什么127.0.0.1和localhost之间算跨域?

原文:https://mp.weixin.qq.com/s/4zJBMNEntwjqAfN6A6diUA

什么是同源策略、跨域

跨域问题是指在浏览器中,当一个网页向不同域名、不同端口或不同协议的资源发起请求时,会受到限制。这是由浏览器的**同源策略(Same-Origin Policy)**所导致的安全限制。

同源策略规定,浏览器允许页面中加载的脚本只与其来源相同的资源进行交互,包括协议(http或https)、主机/域名(domain)、端口(port)

同源策略的主要目的是保护用户的隐私和安全,防止恶意网站通过脚本获取用户的敏感信息或执行恶意操作。如果没有同源策略的限制,恶意网站就可以通过脚本来读取用户在其他网站上的数据,或者在用户不知情的情况下执行一些危险的操作。

如果两个页面的协议、主机或端口有任何一个不同,就被认为是跨域请求,浏览器就会阻止页面获取到其响应

跨域请求示例

通常情况下,在跨域请求当中,涉及到两个请求过程,第一次是预检请求(OPTIONS请求),用于验证服务器是否允许跨域请求,服务器会在响应中携带头部信息给浏览器,浏览器再发送第二次实际的跨域请求,然后服务器接收请求后再进行处理,并在响应中包含必要的头部信息。

图片

注意:在一些特殊情况下,如果服务器已经配置允许来自所有源的请求(使用通配符 *),或者服务器与客户端位于同一源(同源请求),那么只会发送一次实际请求而不需要预检请求。但这通常不是最佳的安全做法,因为它可能会导致安全漏洞。

为什么127.0.0.1和localhost之间算跨域?

经过上面的了解,我们再回到刚开始的问题,为什么127.0.0.1和localhost之间算跨域?

实际就是浏览器的同源策略导致的。虽然它俩指向的都是同一个 IP 地址,即本地主机。

但从浏览器的角度来看,它们仍然被视为不同的域。这是因为浏览器在处理跨域请求时,会将协议+域名+端口号 作为标识符。很显然比如http://localhost:3000/http://127.0.0.1:3000/,它们的主机/域名(domain)是不一样的,因此会出现跨域。

如何解决跨域问题

法1:修改前端的请求URL

首先针对于上述出现的127.0.0.1localhost之间的跨域,最简单的办法就是将前端设置的请求url修改为localhost即可。如下是修改之后进行测试的结果:

图片

法2:spring提供的简化跨域配置的机制

Spring框架提供了一些简化跨域配置的方法,主要是通过Spring Web模块(通常与Spring Boot结合使用)来实现的。

1、使用@CrossOrigin注解:在Controller层,你可以为特定的处理方法或整个控制器类添加@CrossOrigin注解,以声明允许的跨域请求。

图片

2、使用全局配置:如果要在整个应用程序中配置跨域规则,可以使用全局配置。通过CorsRegistry来配置全局跨域规则。

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("**") // 设置路径匹配模式
                .allowedOrigins("http://localhost:8080") // 允许的来源
                .allowedMethods("GET", "POST", "PUT", "DELETE") // 允许的HTTP方法
                .allowedHeaders("Origin", "Content-Type", "Accept") // 允许的HTTP头
                .allowCredentials(true) // 支持用户凭证
                .maxAge(3600); // 缓存时长
    }
}

在上面的示例中,我们创建了一个名为WebConfig的配置类,使用addCorsMappings方法定义了CORS规则,允许来自https://localhost:8080的跨域请求,并指定了允许的HTTP方法、请求头和缓存时间。

通过Nginx反向代理

在分布式项目当中,我们也可以通过Nginx反向代理来解决跨域问题:

在配置文件当中进行配置:

# 设置 HTTP 服务器
server {
    listen 80;
    server_name localhost;

    # 配置反向代理,将 localhost:8080 的请求转发到 localhost:8081
    location / {
        proxy_pass http://localhost:8081;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;

        # 添加跨域头信息
        add_header 'Access-Control-Allow-Origin' 'http://localhost:8080';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        
        # 处理 OPTIONS 请求的头信息
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain charset=UTF-8';
            add_header 'Content-Length' 0;
            return 204;
        }
    }
}

目前,跨域问题的解决方案有多种选择,但其中CORS(跨域资源共享)和服务器端代理是最常用的,它们具备良好的灵活性和安全性,适用于许多不同的应用场景。不过尽管有多种可行的方法,但我们仍然需要根据具体的情况来选择最合适的解决方案,以确保跨域问题能够得到有效解决。

总结

  • 跨域的必要性和重要性:跨域的必要性和重要性在于保护用户数据和隐私、维护互联网生态系统的安全和稳定。
  • 合适的跨域解决方案:根据具体的需求和环境,选择合适的解决方案来确保跨域请求的安全性、兼容性、功能性、性能和维护性。
  • 分布式系统当中的跨域:跨域在分布式系统当中尤为常见,分布式系统通常由多个独立部署的服务或模块组成,这些服务可能运行在不同的域名、主机端口上。当一个服务需要与另一个服务或模块进行通信时,就会涉及到跨域请求。这里大家可以入手我的分布式课程,里面内容丰富,能够帮助大家深入分析和解读代码当中的内在逻辑

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/762586.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

沉浸感拉满的三模游戏外设神器!谷粒金刚3 Pro游戏手柄开箱试玩

沉浸感拉满的三模游戏外设神器!谷粒金刚3 Pro游戏手柄开箱试玩 哈喽小伙伴们好,我是Stark-C~ 对于喜欢打游戏的玩家来说,一款得力的游戏外设绝对是提升游戏体验,增加游戏乐趣的重要神器!而在众多的外设中&#xff0c…

Redis基础教程(六):redis 哈希(Hash)

💝💝💝首先,欢迎各位来到我的博客,很高兴能够在这里和您见面!希望您在这里不仅可以有所收获,同时也能感受到一份轻松欢乐的氛围,祝你生活愉快! 💝&#x1f49…

tkinter实现进度条

tkinter实现进度条 效果代码解析导入需要的模块定义进度条 代码 效果 代码解析 导入需要的模块 import tkinter as tk from tkinter import ttk定义进度条 def start_progress():progress[value] 0max_value 100step 10for i in range(0, max_value, step):progress[valu…

基于大数据架构的情感分析

1 项目介绍 1.1 研究目的和意义 随着大数据时代的到来,电影产业积累了海量的用户评论数据,这些数据中蕴含着观众的情感倾向与偏好信息,为电影推荐和市场策略制定提供了宝贵资源。然而,如何高效地从这浩瀚的数据海洋中提炼出有价…

Linux高并发服务器开发(八)Socket和TCP

文章目录 1 IPV4套接字结构体2 TCP客户端函数 3 TCP服务器流程函数代码粘包 4 三次握手5 四次挥手6 滑动窗口 1 IPV4套接字结构体 2 TCP客户端 特点:出错重传 每次发送数据对方都会回ACK,可靠 tcp是打电话的模型,建立连接 使用连接 关闭连接…

论文阅读《U-KAN Makes Strong Backbone for MedicalImage Segmentation and Generation》

Abstract U-Net 已成为图像分割和扩散概率模型等各种视觉应用的基石。虽然通过结合transformer或 MLP,U-Net 已经引入了许多创新设计和改进,但仍然局限于线性建模模式,而且可解释性不足。为了应对这些挑战,我们的直觉受到了 Kolm…

PCL 基于点云RGB颜色的区域生长算法

RGB颜色的区域生长算法 一、概述1.1 算法定义1.2 算法特点1.3 算法实现二、代码示例三、运行结果🙋 结果预览 一、概述 1.1 算法定义 点云RGB区域生长算法: 是一个基于RGB颜色信息的区域生长算法,用于点云分割。该算法利用了点云中相邻点之间的颜色相似性来将点云分割成…

WCCI 2024开幕,横滨圣地巡礼,畅游动漫与美食的世界

惊喜!WCCI 2024开幕,横滨圣地巡礼!畅游动漫与美食的世界 会议之眼 快讯 会议介绍 IEEE WCCI(World Congress on Computational Intelligence)2024,即2024年IEEE世界计算智能大会,于6月30日至…

力扣53. 最大子数组和(动态规划)

Problem: 53. 最大子数组和 文章目录 题目描述思路及解法复杂度Code 题目描述 思路及解法 1.定义dp数组:dp[i]表示以nums[i]为结尾的子序列的最大子序列和; 2.状态初始化:dp[0] nums[0],表示以nums[0]为结尾的子序列的最大子序列和为nums[0]…

linux配置ssh免密登录

1、准备工作 操作系统版本:UnionTech OS Server 20 1050e 内核版本:Linux 4.19.90-2201.4.0.0135.up1.uel20.x86_64 x86_64 使用root用户分别修改每台机器的hosts,添加每台机器所对应的IP和主机名 vi /etc/hosts添加如下内容 172.16.100.1…

Redis-分布式锁(基本原理和不同实现方式对比)

文章目录 1、基本原理2、不同实现方式 1、基本原理 分布式锁:满足分布式系统或集群模式下多进程可见并且互斥的锁。 分布式锁的核心思想就是让大家都使用同一把锁,只要大家使用的是同一把锁,那么我们就能锁住线程,不让线程进行&am…

生命在于学习——Python人工智能原理(3.1.1)

Python部分结束了,开始概率论部分 一、概率基本知识 1.1 事件与概率 1.1.1 事件的运算与关系 (一)基本概念 定义1 随机试验 如果一个试验满足如下条件: 在试验前不能断定其将发生什么结果,但可明确指出或说明试验…

Hugging Face发布重量级版本:Transformer 4.42

Hugging Face 宣布发布Transformer 4.42,该版本为流行的机器学习库带来了许多新功能和增强功能。此版本引入了几个高级模型,支持新工具和检索增强生成 (RAG),提供 GGUF 微调,并整合了量化的 KV 缓存&#x…

可以显示余弦函数的自定义控件

序言 终于把坐标系变化怎么玩,搞清楚了。随手写一个余弦函数的自定义控件。只有70行。 代码 package com.example.myapplication;import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Pai…

【Emacs Verilog mode保姆级的使用指南】

🌈个人主页: 程序员不想敲代码啊 🏆CSDN优质创作者,CSDN实力新星,CSDN博客专家 👍点赞⭐评论⭐收藏 🤝希望本文对您有所裨益,如有不足之处,欢迎在评论区提出指正,让我们共…

# [0701] Task05 策略梯度、Actor-critic 算法

easy-rl PDF版本 笔记整理 P4、P9 joyrl 比对 补充 P9 - P10 相关 代码 整理 最新版PDF下载 地址:https://github.com/datawhalechina/easy-rl/releases 国内地址(推荐国内读者使用): 链接: https://pan.baidu.com/s/1isqQnpVRWbb3yh83Vs0kbw 提取码: us…

深度学习 --- stanford cs231学习笔记八(训练神经网络之dropout)

6,dropout 6,1 线性分类器中的正则化 在线性分类器中,我们提到过正则化,其目的就是为了防止过度拟合。例如,当我们要用一条curve去拟合一些散点的数据时,常常是不希望训练出来的curve过所有的点&#xff0c…

鸿蒙 DevEcho Studio 查看设备文件

在菜单栏单击View > Tool Windows > Device File Browser,打开Device File Browser。 从下拉列表中选择设备(设备需已连接)。 选择设备后,显示文件/文件夹列表,可进行以下操作: 右键单击目录…

Qt界面中的子窗口实现鼠标拖动边缘改变大小以及移动(完整demo代码)

目录 效果 拖拽 移动​编辑 实现 DragResizeWgt类.h文件 DragResizeWgt类.cpp文件 使用 testwidget窗口.ui文件 testwidget窗口.h文件 testwidget窗口.cpp文件 参考 效果 想要的效果就是类似于QT IDE中的效果,可以拖动边缘改变大小,用户自身可…

Qt:7.QWidget属性介绍(cursor属性-光标形状、font属性-控件文本样式、tooltip属性-控件提示信息)

目录 一、cursor属性-光标形状: 1.1cursor属性介绍: 1.2获取当前光标形状——cursor(): 1.3 设置光标的形状——setCursor(): 1.4 设置自定义图片为光标: 二、font属性-控件文本样式: 2.1font属性介绍…