javascript - vue-cli 本機介面轉送
为情所困
为情所困 2017-05-16 13:25:37
0
2
893

採用vue-cli建置項目,介面轉送如下

proxyTable: {
      '/api': {
            target: 'http://abcd.com/api',
            changeOrigin: true,
            pathRewrite: {
                '^/api': ''
            }
        }
    }

在開發環境下,配置了這個,可以解決在開發環境下的跨域請求,那麼在生產環境下 通過 npm run build打包之後,這一塊的問題vue-cli會自己處理嗎?在生產環境下還需要注意什麼?求大神解答

axios.post('api/auth/register', {
          'firstname':this.firstname,
          'lastname':this.lastname,
          'email':this.email,
          'password':this.password,
          'password_confirmation':this.configPassword
        })
        .then(function (response) {
          console.log(response.data);
        })
        .catch(function (error) {
          console.log(error);
        });

假設請求如上api(生產環境沒有跨域),在本地配置介面轉送之後可以請求到數據,那麼在生產環境應該要怎麼樣?直接打包之後,將資源放在伺服器嗎?

为情所困
为情所困

全部回覆(2)
Peter_Zhu

vue-cli不會幫你處理。 。
開發環境使用本地代理的接口,生產環境使用正式的接口,這個自己代碼裡邏輯寫好就可以了,根據不同環境調用不同的接口地址

刘奇

這個是vue-cli反向代理的一个实现,方便开发环境使用。
生产环境中反向代理的方式也有很多:nginxApache之类的,如果没有跨域,不需要反向代理的话,就把前端代码直接丢在接口服务器中就行了(tomcat、jboss之类),但不推荐,静态资源就应该走静态服务器
我们的生产环境是nginx,配置大概是這樣的:

server {
        listen       80;
        server_name  localhost;

        location / {
            root /home/project/;
            index  index.html index.htm;
        }

        location /api {
            proxy_pass http://10.0.0.10:8080/api;
        }
}
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!