vue生产环境跨域问题？

Question

谷歌未果，特来提问，谢谢！

前端网址：http://demo.com
api服务: http://api.demo.com

vue.config.js

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
  devServer: {
    proxy: {
      '/api': {
        target: 'http://api.demo.com',
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
};

开发环境中的跨域靠proxy解决了，
生产环境中查阅资料可以用Nginx解决

my.conf

server {
    listen       80;
    server_name  demo.com;

    root   /usr/share/nginx/www/html;
    index  index.php index.html index.htm;
    location /api/ {
    proxy_pass http://api.demo.com/;
    }
}

server {
    listen       80;
    server_name  api.demo.com;

    root   /usr/share/nginx/www/apiServer/public;
    index  index.php index.html index.htm;

    location ~ \.php$ {
        fastcgi_pass   php:9000;
        fastcgi_index  index.php;
        fastcgi_param  SCRIPT_FILENAME /usr/share/nginx/www/apiServer/public$fastcgi_script_name;
        include        fastcgi_params;
    }

}

重启Nginx后接口报502错误，是我哪里弄错了吗？

Answer 1

api.demo.com 是你的真实域名吗？

如果不是，你本机是靠配 hosts 映射找的对应主机吗？那你 nginx 所在的服务器上也配 hosts 了吗？没配当然找不到。

---

P.S. 如果可以的话，贴一下 nginx 的访问错误日志才能更好分析问题。

Answer 2

ajax跨域，可以看看大佬整理的文章：
https://segmentfault.com/a/11...