带--user参数的curl转Angular Http请求报CORS错误如何解决

问题根因 #

你现在的代码存在两个问题：

• 参数被二次编码：Angular的HttpClient会自动对params参数做URL编码，你直接传入已经编码完成的name%3D%27Max%27，会导致%被再次转义为%25，和你curl请求的实际参数不一致。
• CORS跨域限制：浏览器的同源策略要求后端接口响应头必须明确允许Authorization请求头，否则预检请求会被拦截，这个是后端服务配置问题，前端代码本身不能直接绕过。

前端代码修正 #

首先修正请求参数和格式，修改后的代码如下：

search() {
    return this.http
      .get<Student>(
        'http:...v1', // 接口地址
        {
          headers: {   
            Authorization: 'Basic '+ btoa("admin:adminpwd")
          },
          params: {
            // 传入原始未编码的查询字符串，Angular会自动完成编码
            qry: "name='Max'",
          }
      }
    );
}

CORS问题解决方案 #

针对跨域问题分场景处理：

本地开发场景 #

使用Angular内置的代理转发功能规避跨域：

1. 项目根目录新建proxy.conf.json，内容如下：

{
  "/api": {
    "target": "http://你的后端接口域名",
    "changeOrigin": true,
    "pathRewrite": {"^/api" : ""}
  }
}

2. 修改angular.json中serve配置，添加代理配置：

"options": {
  "proxyConfig": "proxy.conf.json"
}

3. 前端请求地址改为/api/v1即可，所有请求会被代理转发到后端，不会触发跨域。

生产部署场景 #

需要让后端服务添加以下CORS响应头配置：

• Access-Control-Allow-Origin: 允许你的前端域名访问（测试环境可临时设为*，生产建议指定具体域名）
• Access-Control-Allow-Headers: 需包含Authorization
• Access-Control-Allow-Methods: 需包含GET

内容的提问来源于stack exchange，提问作者Dvora