Question

axios库似乎无法正常工作，我也不知道出了什么问题。

首先，进行解释。我是axios的新手，我工作的公司已将nGinx与proxy pass一起使用来设置API服务器。

因此，可以说API服务器位于以下域中：https://www.api.com，而api端点位于https://www.api.com/api/下。

然后，我们将创建一个SSR应用程序，使用axios库向该服务器发出请求，但是重点是使用proxy settings中的axios，最终请求不会像这样：https://www.api.com/api/endpoint，而是像这样：https://www.js-app.com/api/endpoint。

所以，目前我有以下课程：

class WebApiService {
    constructor() {
        this.deferred = Q.defer();
        this.$http = axios.create();
    }

    async call(config) {
        WebApiService._setDefaultApiCallHeader(config);

        try {
            const result = await this.$http(config);
            this.deferred.resolve(result);
        } catch( error ) {
            this.deferred.reject(error);
        }

        return this.deferred.promise;
    }

    static _setDefaultApiCallHeader(config) {
        config.headers = config.headers || {};

        if (window.sessionStorage['Authorization'] !== 'undefined') {
            config.headers['Authorization'] = `Bearer ${window.sessionStorage['Authorization']}`;
        }


        // HERE I SETUP THE PROXY SETTINGS
        if ( /^\/api\//.test(config.url) ) {
            config.proxy = config.proxy || {};
            config.proxy.host = 'https://www.api.com';
        }
    }
}

现在，当我使用如下代码从应用程序中其他位置利用此类时：

const options = {
  method: 'POST',
  url: '/api/v0/configs',
  data: { domain: window.location.hostname }
};

const websiteConfig = await this.webApiService.call(options);

在浏览器控制台中，我收到404错误，这是因为axios仍然从本地主机而不是从远程服务器请求API调用。

我得到的错误是这样的：

请求拦截器中的axios设置也是如此：

所以，您认为我做错了什么？您认为我试图实现不可能的目标吗？有什么解决办法吗？对如何解决此问题有任何想法吗？

Answer 1

我认为您正在滥用axios代理选项。据我了解，此选项旨在放置一些实际的代理。而且您不需要所有这些。

您应该从服务器https://www.js-app.com为您的应用程序客户端提供服务，以下是Nginx配置的示例：

location / {
    proxy_pass http://localhost:8080;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
 }

对于API服务器：

location /api {
  proxy_pass http://localhost:8081; # here you put your backend server port
  proxy_http_version 1.1;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection 'upgrade';
  proxy_set_header Host $host;
  proxy_cache_bypass $http_upgrade;
  proxy_read_timeout 600s;
}

此nice article中的示例可能会有所帮助。

或者您可以在Google上搜索其他标题，类似于“如何使用Nginx反向代理为生产设置Node.js应用程序”

如果不能那样放置后端服务器，则始终可以在Nginx后面或在Nginx config中执行一些操作，以实际将请求发送到api.com/api

Axios，代理请求似乎不起作用

1 个答案: