首页 > 其他分享 >使用 Angular proxy 解决前端跨域问题

使用 Angular proxy 解决前端跨域问题

时间:2023-05-29 14:34:59浏览次数:40  
标签:文件 跨域 应用程序 json proxy conf Angular

在Angular应用程序的前端部分绕过CORS限制有两个选项:(1)JSONP 和(2)Angular代理。

其中 JSONP 无法设置头部信息,所以如果需要设置头部信息,可以使用Angular代理。

proxy.conf.json文件是Angular应用程序中的一个配置文件,用于配置代理服务器。它的主要作用是帮助前端开发人员在开发和调试阶段解决跨域资源共享(Cross-Origin Resource Sharing,CORS)的问题。

在现代的Web应用程序中,为了提高安全性,浏览器会实施同源策略,限制从一个源加载的资源与另一个源交互。这种限制可能导致前端开发人员在开发过程中遇到跨域问题,特别是当应用程序的前端部分与后端API部分位于不同的域名或端口时。

proxy.conf.json文件通过配置代理服务器,允许开发人员在开发过程中通过向代理服务器发送请求来解决跨域问题。该文件通常位于Angular项目的根目录下。

proxy.conf.json文件的基本结构是一个JSON对象,可以包含多个代理配置项。每个代理配置项由一个路径匹配规则和一个目标URL组成。当应用程序向匹配路径规则的URL发送请求时,代理服务器会将请求转发到目标URL,并将响应返回给应用程序。

以下是proxy.conf.json文件的示例结构:

{
  "/api/*": {
    "target": "http://localhost:3000",
    "secure": false,
    "logLevel": "debug"
  },
  "/images/*": {
    "target": "http://localhost:4000",
    "secure": false,
    "logLevel": "debug"
  }
}

在上述示例中,有两个代理配置项。第一个配置项指定了匹配路径/api/*的请求将被转发到http://localhost:3000。第二个配置项指定了匹配路径/images/*的请求将被转发到http://localhost:4000

proxy.conf.json文件的关键属性包括:

  • target:指定要转发请求的目标URL。它可以是一个完整的URL,包括协议、主机和端口,也可以是一个相对路径。
  • secure:指定是否启用安全的HTTP协议(HTTPS)。
  • logLevel:指定日志级别,用于输出代理服务器的日志信息。

为了在开发过程中使用proxy.conf.json文件,可以通过Angular的CLI命令来启动开发服务器,并将其与proxy.conf.json文件关联起来。例如,可以使用以下命令来启动开发服务器:

ng serve --proxy-config proxy.conf.json

这样,开发服务器将根据proxy.conf.json文件中的配置项来处理代理请求,并将相应的请求转发到目标URL。

通过使用proxy.conf.json文件配置代理服务器,前端开发人员可以在开发和调试阶段轻松地解决跨域问题,使前端应用程序能够与后端API进行交互.

在 Angular 里使用 proxy 的方式如下。

  1. 首先创建一个 proxy.conf.json 文件。
{
  "/api": {
    "target": "https://www.m22.com", // example endpoint
    "secure": true,
    "pathRewrite": {
      "^/api": "/kats" // rewrites the endpoint path from '/api' to '/kats'
    },
    "changeOrigin": true
  }
}
  1. 在 angular.json 文件的 serve 区域里,将前一步骤定义的配置文件加入:
 "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "move-safe:build",
            "proxyConfig": "src/proxy.conf.json" // location of the config file
          },

最后调用 HTTP 请求:

getAll(): Observable<KatsResponse> {
    const url = '/api/?show=option1'; 
    // request will be sent to "https://www.m22.com/kats?show=option1"
    const headers = new HttpHeaders({
      'Content-Type': 'application/json',
    });

    return this.http
      .get<KatsResponse>(url, { headers })
      .pipe();
  }

标签:文件,跨域,应用程序,json,proxy,conf,Angular
From: https://www.cnblogs.com/sap-jerry/p/17440324.html

相关文章

  • 什么是 Angular Composable 概念
    我们都知道Lodash,它是一个在项目中重用无状态逻辑的库。那么,如果在Angular项目中我们有一个类似的工具包来重用有状态逻辑呢?Composables并不是一个新的概念,它是来自Vue.js的一个概念。我在这篇博客中使用的许多示例和想法直接来自Vue.jsComposables文档。在版本16.0.......
  • 52.同源策略(Same-Origin Policy)限制了跨域请求No 'Access-Control-Allow-Origin' head
    又遇到如下报错了,该如何处理,AccesstoXMLHttpRequestat'http://localhost:3000/users'fromorigin'http://localhost:5173'hasbeenblockedbyCORSpolicy:No'Access-Control-Allow-Origin'headerispresentontherequestedresource.这个错误......
  • 前端解决浏览器跨域问题
      自从前后端分离后,浏览器做出了很多的限制,如产生跨域时将限制访问服务器,那要如何解决前端跨域的问题,下面将以谷歌浏览器(chrome)为标椎来提出一个简单且常用解决方案。 一、创建一个能够跨域的谷歌浏览器下载并安装谷歌浏览器以后(如果已经拥有那就不用),右击谷歌浏览器使用快......
  • 前端如何解决跨域问题
      跨域问题是指由于浏览器的同源策略(Same-OriginPolicy:两个页面具有相同的协议、主机和端口,三者有任一不相同即会产生跨域),导致不能在不同域名、协议或端口之间直接进行数据交互。跨域是浏览器的一种安全机制,服务端之间是不存在跨域的。如下表所示:解决方案JSONP:JSONP利用scri......
  • fetch跨域发送带凭据的请求
    发送带凭据的请求fetch('https://example.com',{credentials:'include'});当请求使用credentials:'include'时,响应的Access-Control-Allow-Origin不能使用通配符""。在这种情况下,Access-Control-Allow-Origin必须是当前请求的源。如果Access-Control-Allow-Or......
  • 九种跨域方式实现原理
    @目录前言什么是跨域?什么是同源策略及其限制内容?常见跨域场景跨域解决方案jsonpJSONP原理JSONP和AJAX对比JSONP优缺点JSONP的实现流程jQuery的jsonp形式cors简单请求复杂请求postMessagewebsocketNode中间件代理(两次跨域)nginx反向代理window.name+iframelocation.h......
  • 2023年5月,记录一下WIN10安装proxypool过程中遇到的一些坑
    这两天要学习python爬虫中的代理池,因此要配置proxypool,过程可以说是一波三折。虽然网上也有很多相关教程,不过一些文章也是比较老了,笔者在配置中也碰上了一些新问题,这里笔者也是分享一下本人解决问题的过程。redis设置首先,我们需要下载一下Redis:下载地址:github.com/tporadowsk......
  • kube-proxy的iptables与ipvs模式性能对比与分析
    kube-proxy的iptables与ipvs模式性能对比与分析背景:iptables代理模式iptables是一个Linux内核功能,旨在成为一种高效的防火墙,具有足够的灵活性来处理各种常见的数据包操作和过滤需求。它允许将灵活的规则序列附加到内核数据包处理管道中的各种钩子上。在iptables模式下,kube-p......
  • 配置类统一处理请求跨域
    跨域处理跨域:浏览器对于javascript的同源策略的限制。以下情况都属于跨域:跨域原因说明示例域名不同www.jd.com与www.taobao.com域名相同,端口不同www.jd.com:8080与www.jd.com:8081二级域名不同item.jd.com与miaosha.jd.com如果域......
  • Angular Material教程_编程入门自学教程_菜鸟教程-免费教程分享
    教程简介AngularMaterial是AngularJS开发人员的UI组件库。AngularMaterial的可重用UI组件有助于构建有吸引力,一致且功能强大的Web页面和Web应用程序,同时遵循现代Web设计原则,如浏览器可移植性,设备独立性和优雅降级。AngularMaterial入门教程-从简单的步骤了解角度材料,从基......