Angular http代理proxy配置,解决跨域

╰+攻爆jí腚メ 2023-06-15 12:29 1阅读 0赞

### Angular7 http代理proxy配置 ###

*   *  1. proxy.conf.json
     *  2. 启动代理

> 前后端分离开发时，需要进行http请求后端，这时刚会遇上跨域问题。  
> 解决方法之一就是使用proxy代理  
> ng proxy是基于webpack proxy, 更详尽说明：https://webpack.js.org/configuration/dev-server/\#devserver-proxy

## 1. proxy.conf.json ##

在项目根目下添加文件：`proxy.conf.json`

**示例：**

{ 
        "/api": { 
            "target": "http://localhost:8089/",
            "secure": false,
            "pathRewrite": { 
                "^/api": ""
            },
            "changeOrigin": true,
            "loglevel": "debug"
        }
    }

**示例说明：**  
对所有`/api/*`的请求，转发到`http://localhost:8089/`上

*  `target`，一般是后端服务地址
 *  `pathRewrite`，重写url路径。效果就是前端统一请求后端时使用`/api/`，而实际代理时则无此关键字。
 *  `changeOrigin`，如果你的后端服务不是`localhost`，则需把此项设为`true`
 *  `loglevel`，日志级别。包括 debug, info, warn, error, and silent (默认 info)

## 2. 启动代理 ##

ng cli 启动项目时会检查是否存在代理文件`proxy.conf.json`，所以可不需配置启动项目

$ ng serve

如果你新增了其他代理文件，也可以指定文件进行启动

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

这就完成了代理后端的配置了，使用代理也解决了跨域访问的问题。

发表评论取消回复

表情：

评论列表（有 0 条评论，1人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue3配置proxy解决跨域

域问题是前端开发中较常见的问题，因为javascript的浏览器会支持同源策略，如果域名、协议、端口任意不同就会产生跨域，如果非同源，那么在请求数据时，浏览器会在控制台中...

妖狐艹你老母/ 2024年04月20日 08:15/ 0 赞/ 118 阅读

相关 Vite配置Proxy代理解决跨域问题

Vite配置Proxy代理解决跨域问题 1.跨域问题 2.跨域常用解决方案 3.proxy代理的原理 4.Vite中配置代理 4.1.

柔情只为你懂/ 2023年10月11日 22:07/ 0 赞/ 111 阅读

相关 reactjs脚手架配置http-proxy-middleware代理解决跨域问题

reactjs脚手架配置http-proxy-middleware代理解决跨域问题 ![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_s

深碍√TFBOYSˉ_/ 2023年10月01日 17:09/ 0 赞/ 51 阅读

相关 docker配置http proxy代理

Configure the Docker client On the Docker client, create or edit the file `~/.docker/c

叁歲伎倆/ 2023年09月28日 15:57/ 0 赞/ 36 阅读

相关 proxy代理解决跨域

vue项目中设置代理 1,config\\index.js下的dev下的proxyTable属性 proxyTable: { '/look'

客官°小女子只卖身不卖艺/ 2023年07月17日 07:00/ 0 赞/ 73 阅读

相关 Angular http代理proxy配置,解决跨域

Angular7 http代理proxy配置 1. proxy.conf.json 2. 启动代理 > 前后端分离开发时，需要进行http请求

╰+攻爆jí腚メ/ 2023年06月15日 12:29/ 0 赞/ 2 阅读

相关 Vue中使用proxy配置代理解决跨域问题

1、需求说明在前后端分离开发中，前端发送ajax请求因为受到了浏览器同源策略的限制，会出现跨域的问题，在Vue项目中使用代理请求解决跨域问题。如果使用vue/cl

喜欢ヅ旅行/ 2023年01月15日 05:59/ 0 赞/ 204 阅读

相关通过配置代理解决跨域

> Do everything you can right now, and then decide. > 全力以赴，历而后择。背景： > 项目请求后端本地loc

╰+攻爆jí腚メ/ 2022年08月30日 14:57/ 0 赞/ 305 阅读

相关 react中通过proxy配置代理解决跨域问题

一，对于使用creat-react-app构建的项目，可以直接在package.json下配置，具体如下 "proxy": "http://api.xxxx.com"

蔚落/ 2021年09月17日 10:20/ 0 赞/ 584 阅读

相关（十五）ArcGIS JS 跨域代理proxy的配置

为什么要使用代理proxy？未配置代理时server发送请求是用get的方式，`请求跨域访问`或者`URL长度超过浏览器限制`时，这就需要一个代理文件proxy

青旅半醒/ 2021年09月16日 09:52/ 0 赞/ 825 阅读