在同域名下运行AngularJS+Webpack NPM与PHP服务解决跨域问题

嘿，这个跨域问题我太熟了！既然你想把AngularJS+Webpack的NPM服务部署到和Apache+PHP相同的local.com域名下，给你三个实用方案，按需选就行：

如果是准备上线或者不需要实时热重载的场景，直接把Webpack打包后的静态文件放到Apache的local.com根目录：

• 先在你的项目根目录执行构建命令：npm run build（如果你的package.json里是其他构建命令，比如build:prod，就用对应的），这会生成一个dist文件夹（部分项目可能叫build，看配置），里面是压缩好的HTML、JS、CSS等静态资源。
• 找到Apache对应local.com的根目录（比如Windows下XAMPP的C:\xampp\htdocs\local.com，Linux下是/var/www/local.com/public_html），把dist里的所有文件复制到这个根目录下。
• 重启Apache服务，访问http://local.com就能运行你的AngularJS应用了，此时调用同域名下的test.php完全不会有跨域限制。

如果还在开发阶段，想保留热重载功能，不想每次改代码都重新构建，可以给Webpack配置代理，把API请求转发到local.com：

• 打开项目里的webpack.config.js（如果是用AngularJS的脚手架，可能是webpack.dev.js），找到devServer配置项，添加proxy规则：

devServer: {
  port: 9080, // 你的NPM服务端口
  // 其他已有的配置...
  proxy: {
    // 匹配所有以.php结尾的请求，转发到local.com
    '*.php': {
      target: 'http://local.com',
      changeOrigin: true, // 关键：修改请求头里的Origin为local.com
      secure: false // 如果local.com没有HTTPS，设为false
    }
  }
}

• 重启NPM服务（npm start），现在你的AngularJS应用在localhost:9080发起的test.php请求，会被Webpack Dev Server偷偷转发到http://local.com/test.php，浏览器会以为是同域名请求，跨域问题直接解决。

要是想保留NPM服务的热重载，同时让它挂在local.com的子路径下（比如http://local.com/my-app），可以配置Apache的反向代理：

• 打开Apache的虚拟主机配置文件（一般是httpd-vhosts.conf，在Apache的conf/extra目录下），找到local.com的虚拟主机配置，添加代理规则：

<VirtualHost *:80>
  ServerName local.com
  DocumentRoot "/path/to/your/local.com/root"

  # 把 /my-app 路径的请求代理到NPM服务的端口
  ProxyPass /my-app http://localhost:9080
  ProxyPassReverse /my-app http://localhost:9080

  # 确保允许代理请求
  <Proxy http://localhost:9080>
    Order allow,deny
    Allow from all
  </Proxy>
</VirtualHost>

• 检查Apache是否启用了mod_proxy和mod_proxy_http模块：打开httpd.conf，去掉下面两行前面的#注释：

#LoadModule proxy_module modules/mod_proxy.so
#LoadModule proxy_http_module modules/mod_proxy_http.so

• 重启Apache和NPM服务，访问http://local.com/my-app就能打开你的AngularJS应用，此时调用http://local.com/test.php完全符合同域名规则，跨域报错消失。

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