Angular:跨域请求携带 cookie

新建拦截器,设置 XMLHttpRequest:withCredentials 属性

1. 新建文件夹 http-interceptors

该文件夹下可有多个不同用途的拦截器

2. 新建拦截器 common.interceptor.ts

import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { Observable } from "rxjs";@Injectable()
export class CommonInterceptor implements HttpInterceptor {intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {return next.handle(req.clone({withCredentials: true}));}

3. 用一个数组汇总起来,统一引入: index.ts (后续需要添加拦截器,只需加入到该数组即可)

import { HTTP_INTERCEPTORS } from "@angular/common/http";
import { CommonInterceptor } from "./common.interceptor";export const httpInterceptorProvides = [{provide: HTTP_INTERCEPTORS,useClass: CommonInterceptor,  //指定使用哪个拦截器multi: true  //表示可设置多个拦截器}
]

4. 引入拦截器使用: service.module.ts

import { isPlatformBrowser } from '@angular/common';
import { InjectionToken, NgModule, PLATFORM_ID } from '@angular/core';
import { httpInterceptorProvides } from './http-interceptors';export const API_CONFIG = new InjectionToken('ApiConfigToken');
export const WINDOW = new InjectionToken('WindowToken');@NgModule({declarations: [],imports: [],providers: [{provide: API_CONFIG,useValue: 'http://localhost:3000/'},{provide: WINDOW,useFactory(platformId: Object): Window | Object {return isPlatformBrowser(platformId) ? window : {};},deps: [PLATFORM_ID]},httpInterceptorProvides]
})
export class ServicesModule { }

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Go语言实现新年快乐的效果

在 Go 语言中&#xff0c;你可以使用 fmt 包来实现新年快乐的效果。以下是一个简单的例子&#xff1a; package mainimport ("fmt""time" )func printNewYear() {fmt.Println("\033[31m新年快乐&#xff01;\033[0m")fmt.Println("\033[32…

电脑 wifi 常断

问题 电脑wifi网络经常断。 详细问题 笔者使用笔记本电脑&#xff0c;发现每过三五分钟&#xff0c;wifi便会自动断开。 解决方案 步骤1、搜索框搜索设备管理器。 步骤2、找到网络适配器并点击。 步骤2、找到网络适配器菜单中的Wireless相关内容&#xff0c;右键&#x…

企业微信开发:客户端调试

开启客户端调试 按照下面官网的说明操作&#xff0c;就可以开启客户端调试了。 官网文档链接&#xff1a;企业微信开发者中心&#xff1a;常见问题 - FAQ - 客户端调试 进入调试模式 进入方式&#xff1a;Ctrl Alt Shift D 按快捷键 Ctrl Alt Shift D&#xff0c;进入…

(十)Head first design patterns组合模式(c++)

组合模式 组合模式在参考链接中已经讲得很好了&#xff0c;这里只简单讲讲就好。 组合模式的意图是表达部分-整体层次结构。 当你需要管理一个组合对象&#xff0c;又要管理这个组合对象的单个对象。这个时候就可以让这个组合对象和单个对象继承同一个基类&#xff0c;以便用…

Golang 通过开源库 go-redis 操作 NoSQL 缓存服务器

前置条件&#xff1a; 1、导入库&#xff1a; import ( "github.com/go-redis/redis/v8" ) 2、搭建哨兵模式集群 具体可以百度、谷歌搜索&#xff0c;网上现成配置教程太多了&#xff0c;不行还可以搜教程视频&#xff0c;跟着视频博主一步一个慢动作&#xff0…

《绝地求生大逃杀》怎么买衣服 Steam商店服装购买方法

《绝地求生大逃杀》怎么买衣服&#xff1f;游戏中好看的服装有不少&#xff0c;大家可能开箱并没开出来&#xff0c;想买却不知具体的入手途径&#xff0c;今天闲游盒带来《绝地求生大逃杀》怎么买衣服 Steam商店服装购买方法&#xff0c;希望对各位有帮助。 打开Steam&#xf…

Oracle中如何把整个表作为参数传递

当然可以&#xff01;在Oracle中&#xff0c;你可以使用表类型的变量来传递表作为参数。首先&#xff0c;你需要创建一个表类型的变量&#xff0c;然后在存储过程或函数中声明这个变量。接下来&#xff0c;你可以将实际表的数据赋值给这个变量&#xff0c;并在存储过程或函数中…

JavaEE进阶(6)SpringBoot 配置文件(作用、格式、properties配置文件说明、yml配置文件说明、验证码案例)

接上次博客&#xff1a;JavaEE进阶&#xff08;5&#xff09;Spring IoC&DI&#xff1a;入门、IoC介绍、IoC详解&#xff08;两种主要IoC容器实现、IoC和DI对对象的管理、Bean存储、方法注解 Bean)、DI详解&#xff1a;注入方式、总结-CSDN博客 目录 配置文件作用 Sprin…

技巧--75. 颜色分类/medium 理解度C

75. 颜色分类 1、题目2、题目分析3、复杂度最优解代码示例4、适用场景 1、题目 给定一个大小为 n 的数组 nums &#xff0c;返回其中的多数元素。多数元素是指在数组中出现次数 大于 ⌊ n/2 ⌋ 的元素。 你可以假设数组是非空的&#xff0c;并且给定的数组总是存在多数元素。…

LeetCode刷题日记

LeetCode刷题日记 HashMap 第1题----两数之和 原题地址 [https://leetcode.cn/problems/two-sum/]: 解题思路&#xff1a; 将数组中每个元素通过两次遍历使两数之差target&#xff0c;最后由结果target得到对应数组下标。此时算法的时间复杂度为O(n^2)。故而放弃此方法。 由于…

Flink对接Kafka的topic数据消费offset设置参数

scan.startup.mode 是 Flink 中用于设置消费 Kafka topic 数据的起始 offset 的配置参数之一。 scan.startup.mode 可以设置为以下几种模式&#xff1a; earliest-offset&#xff1a;从最早的 offset 开始消费数据。latest-offset&#xff1a;从最新的 offset 开始消费数据。…

thinkphp5实战之phpstudy v8环境搭建,解决Not Found找不到路径问题

引言 thinkphp以快速、简约的大道至简的思想广受欢迎&#xff0c;适合开发小型项目。本地环境下&#xff0c;phpstudy v8是一款比较优秀的集成环境软件。部署完项目后&#xff0c;访问的时候傻眼&#xff0c;报错。 解决方案 不要慌&#xff0c;这个是伪静态的原因。选择apach…

Kong关键概念 - 服务(Services)

服务&#xff08;Services&#xff09; 在Kong Gateway中&#xff0c;服务是代表外部上游&#xff08;upstream&#xff09;API或微服务的实体。例如&#xff0c;数据转换微服务、计费API等。 服务的主要属性是其URL。您可以使用一个字符串来指定URL&#xff0c;或者通过分别…

在 wsl-ubuntu 里通过 docker 启动 gpu-jupyter

在 wsl-ubuntu 里通过 docker 启动 gpu-jupyter 0. 背景1. 安装 docker-ce2. 安装 NVIDIA Container Toolkit3. 使用 nvidia-ctk 命令配置容器运行4. 通过 docker 运行 nvidia-smi5. 运行 gpu-jupyter6. 访问 gpu-jupyter7. 测试 gpu-jupyter 是否可以访问 cuda 0. 背景 今天突…

Vue3的ref和reactive

目录 1、ref的基本使用 2、reactive的基本使用 3、ref操作dom 4、ref与reactive的异同 1、ref的基本使用 ref创建数据可以是基本类型也可以是引用类型 ref函数创建响应式数据&#xff0c;返回值是一个对象 模版中使用ref数据,省略.value&#xff0c;js代码中不能省略 获…

i18n多国语言Internationalization的动态实现

一、数据动态的更新 在上一篇i18n多国语言Internationalization的实现-CSDN博客&#xff0c;可能会遇到一个问题&#xff0c;我们在进行英文或中文切换时&#xff0c;并没有办法对当前的数据进行动态的更新。指的是什么意思呢&#xff1f;当前app.js当中一个组件内容&#xff…

Go语言学习笔记:基础语法和类型

Go语言学习笔记&#xff1a;基础语法和类型 目录 Go语言学习笔记&#xff1a;基础语法和类型学习路线前言变量声明常量数据类型布尔型&#xff08;Boolean&#xff09;整型&#xff08;Integer&#xff09;浮点型&#xff08;Floating point&#xff09;复数型&#xff08;Comp…

LeetCode.2765. 最长交替子数组

题目 2765. 最长交替子数组 分析 为了得到数组 nums 中的最长交替子数组的长度&#xff0c;需要分别计算以每个下标结尾的最长交替子数组的长度。为了方便处理&#xff0c;计算过程中需要考虑长度等于 1 的最长交替子数组&#xff0c;再返回结果时判断最长交替子数组的长度…

【代码整理】COCO格式数据集画框

可以用于排查数据集转化后可能出现的坐标错误&#xff0c;类别不对齐等需要可视化才能发现的问题 import部分 from pycocotools.coco import COCO import numpy as np import os from PIL import Image from matplotlib.collections import PatchCollection from matplotlib.…

详细分析Java中的Date类以及格式转换

目录 前言1. 基本知识2. 格式化输出3. 格式转换 前言 记录这篇文章的缘由&#xff0c;主要是涉及一个格式转换&#xff0c;对此深挖了这个类 在Java中&#xff0c;Date类是用于表示日期和时间的类。 位于java.util包中&#xff0c;是Java平台中处理日期和时间的基本类之一。…