解决angular跨域问题

解决angular跨域，方便本地调试

2021.6.3 2023.7.12 Posts 424 1

背景

最近还在折腾angularjs1.8迁移到angular11，由于需要本地调试，所以我希望能访问我的go后端（通过域名访问），但是f12调试界面会提示跨域，导致我的post和get请求都变成了options，服务端我都配置了Cross-Origin所以参考网上学习了下

angular的配置

原来angular自己早就想到了这一点，通过配置proxy可以完美解决测试的问题

配置proxy.config.json

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


{
  "/api": {
    "target": "http://192.168.10.204:5120/",
    "secure": false,
    "pathRewrite": {"^/api": "/api"}
  },
  "/auth": {
    "target": "http://192.168.10.204:5120/",
    "secure": false,
    "pathRewrite": {"^/auth": "/auth"}
  }
}

这样只要我们访问链接是/api开头的就会指向5120端口的服务，访问auth也是

配置package.json

另外仍然建议配置一下package.json， start一行改为 "start": "ng serve –host 0.0.0.0 –port 4120 –proxy-config proxy.config.json", 这样只要启服务, npm start就好了，挺方便的哈

总结

angular跨域通过proxy可以完美解决

package.json里面有一些快捷命令设置

angular