Как отправить запрос в API на удаленном сервере через сервер разработки веб-пакетов с помощью Axios

Question

Я хочу получить некоторые данные с моего удаленного сервера, поддерживающего REST API.Я использую Axios и веб-Dev-сервер.Мой веб-интерфейс отправляет запрос, и я использовал Firefox и Chrome, чтобы открыть свой веб-интерфейс.Однако каждый раз, когда я пытаюсь сделать запрос, я сталкиваюсь с ошибкой cors.Также я не хочу вносить какие-либо изменения на моем сервере.Firefox и Chrome отправляют этот заголовок.

Accept:*/*
Accept-Encoding:gzip, deflate
Accept-Language :en-US,en;q=0.5
Connection:keep-alive
Host:my.ip.to.host:port
Origin:http://localhost:3000
Referer:http://localhost:3000/login
User-Agent:Mozilla/5.0 (X11; Ubuntu; Linu…) Gecko/20100101 Firefox/67.0

Я попытался запустить мой простой код запроса на онлайн-платформе без web-dev-сервера, и там он прекрасно работает.

Вот мой код

      //********** my request*********
    return axios
        .get('<a href="http://my.ip.to.host:port/api/User/login" rel="nofollow noreferrer">http://my.ip.to.host:port/api/User/login</a>', {
            headers: {
                Accept: '<em>/</em>'
            }
        })
        .then(function(response) {
            console.log(response);
            return 'user';
        })
        .catch(function(error) {
            console.log(error);
            return 'err';
        });
     //*****************************
    

     //*****webpack.config.js********
    var HtmlWebpackPlugin = require('html-webpack-plugin');
    require('babel-polyfill');
    module.exports = {
        mode: 'development',
        entry: [ 'babel-polyfill', './src' ],
        resolve: {
            extensions: [ '.js', '.jsx' ]
        },
        module: {
            rules: [
                {
                    test: /.jsx?$/,
                    loader: 'babel-loader'
                }
            ]
        },
        plugins: [
            new HtmlWebpackPlugin({
                template: './src/index.html'
            })
        ],
        devServer: {
            historyApiFallback: true,
            port: 3000
        },
        externals: {
            // global app config object
            config: JSON.stringify({
                apiUrl: '<a href="http://localhost:4000" rel="nofollow noreferrer">http://localhost:4000</a>',
                checkLogin: '<a href="http://my.ip.to.host:port/api/User/login" rel="nofollow noreferrer">http://my.ip.to.host:port/api/User/login</a>'
            })
        }
    };
    

Вот ошибка, которую я получаю.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://my.ip.to.host:port/api/User/login. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).`enter code here`

Answer 1

Здесь Google очень хорошо объяснил cors ( Запросы перекрестного происхождения ).

Я работал над этим, размещая прокси-сервер (на том же локальном сервере, где я размещаю)мой клиент) и перенаправляя все мои одностраничные запросы приложений через него.

Прежде всего, я создал настройку прокси-сервера в ключе devsever файла конфигурации webpack, как это.

    devServer: {
        proxy: {
    //abc is REST API request endpoint on my backend
            '/abc': {
                //target is where your proxy server is hosted
                target: 'http://localhost:5000',
                secure: 'false'
            },
    //xyz is REST API request endpoint on my backend
            '/xyz': {
                //target is where your proxy server is hosted
                target: 'http://localhost:5000',
                secure: 'false'
            }
        },......// rest of the setting
      }

ЗатемДля конкретного вызова действия через моего клиента я делаю запрос к своему бэкэнду следующим образом.

    axios
        .get('/startAppkey', { withCredentials: true })// withCredential enables passing of cookies and session id. If you dont want to creat session you can avoid this.
        .then((response) => {
                           // do stuff with response
                            })
                        .catch(function() {
                         //do stuff
                        });

Наш клиент готов.Теперь время для прокси-сервера.Сначала установите http-proxy-middleware, Как это.

    sudo npm i --save http-proxy-middleware
    //it is also avilable on yarn

, затем, Для настройки прокси-сервера здесь есть несколько строк кода.

    import * as express from 'express'; // using express to support my middleware
    import * as proxy from 'http-proxy-middleware';
    const app = express();
    // the path /abc and /xyz should be same as you have declared in in webpack config file
    app.use('/abc', proxy({ target: 'http://your/backend/api/endpoint'}));
    app.use('/xyz', proxy({ target: 'http://your/backend/api/endpoint'}));
    //that's it you are done here. 

Answer 2

Вам необходимо установить withCredentials как true в конфигурации Axios. Настройка Cors

let HttpInterceptor = axios.create({
  headers: {
    Accept: "*/*"
  }
});

HttpInterceptor.interceptors.request.use(
  function(config) {  
    config.withCredentials = true; // To enable CORS
    return config;
  },
  function(error) {
    return promise.reject(error);
  }
);



//********** Your request*********
    return HttpInterceptor
        .get('http://my.ip.to.host:port/api/User/login')
        .then(function(response) {
            console.log(response);
            return 'user';
        })
        .catch(function(error) {
            console.log(error);
            return 'err';
        });