Angular:跨域请求携带 cookie

这篇具有很好参考价值的文章主要介绍了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 { }

文章来源地址https://www.toymoban.com/news/detail-817366.html

到了这里,关于Angular:跨域请求携带 cookie的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Flask 登陆生成cookie,携带cookie请求

    导入所需的模块: Flask 、 request 、 jsonify 和 random 。 创建一个Flask应用程序实例,并设置 SECRET_KEY 配置。 /login 路由定义为 POST 方法。它检查提供的用户名和密码是否与硬编码的值( admin 和 admin )匹配。如果登录成功,它生成一个随机的cookie,并返回一个带有成功消息和生成

    2024年02月16日
    浏览(57)
  • postman请求携带Cookie

    本文提供一种让请求携带Cookie的高效解决方案,之前试过使用 Postman Interceptor 插件,但是刚开始配置完有效,过了一天后就失效了,所以自己去找其它方法实现了。 原文:语雀 **思路:使用环境变量 步骤 关闭自动生成的Cookie头 设置环境变量 把环境变量添加到请求参数中(

    2024年02月11日
    浏览(38)
  • selenium携带cookies启动,请求

    一,携带本地缓存cookies启动 1,第一次启动先手动在要请求的网页输入账号信息等 2,之后正常启动,请求目标网站会自动添加cookies 二,携带账号cookies启动 1, 先请求目标网站,保存cookies 2,先请求目标网站, 读取刚刚保存下来的cookies文件再次去请求目标网站 headers里的

    2024年02月12日
    浏览(40)
  • Unity WebGl和前端(Angular)相互调用(含跨域问题)

    在Unity官方文档中就已经介绍了Unity和JS相互调用的问题,但是我们实际的应用中往往是使用iframe来展示WebGL。这样不但是webgl和js相互调用的问题,还包含了iframe跨域的问题。 我们的项目中前端使用的是angular框架,就以angular为基础来说一下这个问题,当然vue的前端框架应该都

    2024年02月15日
    浏览(44)
  • 【angular教程240112】09(完) Angular中的数据请求 与 路由

    【angular教程240112】09(完) Angular中的数据请求 与 路由 Angular中的数据请求 内置模块HttpClient实现(get post jsonp 以及第三方模板axios请求数据 一、 Angular get 请求数据 二、 Angular post提交数据 三、 Angular Jsonp请求数据 四、 Angular中使用第三方模块axios请求数据 五、Angular内置模块H

    2024年01月21日
    浏览(42)
  • python爬虫,发送请求需要携带cookies

    此网站,需要先注册登录!!! 页面源代码: python代码: 运行结果:有数据 {\\\'next_max_id\\\': -1, \\\'items\\\': [], \\\'next_id\\\': -1} 此实例只是为了验证,某些网站反爬必须需要携带cookies。

    2024年01月16日
    浏览(71)
  • iframe通过postMessage进行跨域通信以及在Angular中使用

    在前端开发过程中,会遇到一些需要使用iframe的场景,使用iframe关键的一个点是数据之间的传输,基于同源的要求十分苛刻,大家基本上是都是跨域的,如果跨域进行数据传输呢? 大家使用的比较多的就是postMessage()这个方法了,下面将具体展示如何在html中使用iframe进行数据

    2024年02月10日
    浏览(35)
  • 前端为什么发请求没有携带cookie?

    在前端发送请求时,如果想要携带 cookie,通常只能携带存储在与请求域名相同路径的 cookie。这是由浏览器的同源策略所决定的。 同源策略要求请求的域名、协议和端口都必须一致,否则浏览器会限制跨域请求的权限。当浏览器发送跨域请求时,默认情况下不会自动携带 co

    2024年02月06日
    浏览(91)
  • 微信小程序在发送请求时携带cookies问题

    我在微信小程序的开发过程中发现如果使用wx.request请求时,请求数据传到后端后是不携带cookie的但是,原因是微信开发工具对wx.request进行修改需要经过微信服务器发送,那么我们后台服务就无法获取到cookie,有些时候也无可避免使用cookie做一些鉴权验证,那怎么办呢。 其实

    2024年02月14日
    浏览(40)
  • ajax请求携带自定义请求头header(跨域和同域)

    1. ajax跨域请求(无cookie、无header)案例(java) (1)启动一个java web项目,配置两个域名(host),czt.ming.com、czt.casicloud.com, java后端代码如下 : 注意:Access-Control-Allow-Origin (2)前端页面代码如下: (3)测试ajax跨域请求: 通过http://czt.casicloud.com/xxx/xxx访问页面,js触发aja

    2023年04月26日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包