Angular小博客

分享让你更聪明

Angular怎么解决跨域

浏览:131次 日期:2024年08月01日 20:35:39 作者:admin

在开发项目中我们一般都会遇到接口请求跨域的问题,在控制台会打印如下的信息就意味着跨域了

Access to XMLHttpRequest at 'http://localhost:3000/?id=456' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Access-Control-Allow-Origin

1、在Angular项目根目录创建proxy.conf.json文件

{
    //所有 api开头的接口都走这个
    "/api": {
        // 目标域名
        "target": "http://localhost:3000",
        "secure": true,
        "changeOrigin": true
    }
}

别忘了删除上面代码的注释,要不然报错哦。

2、angular.json中添加proxy.conf.json

// projects/你的项目名/architect/serve 下添加,如下代码
"options": {
    "proxyConfig": "src/proxy.conf.json"
}

// 完成代码
{
    // 其他代码
    "projects": {
        "angularTest": {
            "architect": {
                "build": {
                    // 其他代码
                },
                "serve": {
                    // 其他代码
                    "options": {
                        "proxyConfig": "proxy.conf.json"
                    }
                },
                // 其他代码
            }
        }
    }
}

完成之后ng serve启动就可以了
更多配置请查看 https://angular.cn/tools/cli/serve#proxying-to-a-backend-server