angular解决跨域及打包发布

一、解决跨域

1.在项目的根目录下创建一个proxy.conf.json文件

2.修改文件内容为：

{

    "/api": {

              "target":"http://xxxx:xxx",// 指向需要代理的地址和端口号

               "secure":false,

              "changeOrigin":true,

"pathRewrite":{

               "^/api":""

             }

    }

}

3.修改package.json文件

将ng serve修改为ng serve --proxy-config proxy.conf.json

这一步是配置命令的快捷方式，如果实用ng serve直接启动，也可以不修改package.json文件。

到此为止，跨域问题已经解决。这种方式仅仅是在调试的过程中方便我们避免跨域带来的麻烦，发布到服务器之前需要build工程，此时就不需要这种方式。

二、打包发布

1.实用cli命令打包时，我们先创建两个文件用于存放测试和生产环境的api地址。

内容如下：

2.在http请求处拼接api地址。

3.修改package.json中"build":"ng build --base-href ./"。--base-href的作用是在index.html中生成<base href="./">，表示在当前的工程目录下。

4.静态资源，比如图片尽可能放到assets目录下，并修改相应的资源访问路径，比如./assets/images/xxx，这样就可以在打包后找到相应资源。

5.使用npm run build即可完成测试环境的打包，同理，生产环境打包使用prod的后缀即可。