ax ios, параметры массива и CORS - PullRequest
Новая
       71

ax ios, параметры массива и CORS

0 голосов
/ 28 января 2020

Я использую топор ios с квазаром / vue. axios.post(this.serverUrl, null, {params: {blah: "test"}} параметры являются третьим параметром. Я видел, что это должно быть 2-ым, но когда это было, я получил следующее:

Доступ к XMLHttpRequest в 'https://example.com' from origin 'http://localhost: 8080 'заблокировано политикой CORS: Ответ на запрос предварительной проверки не проходит проверку контроля доступа: в запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin».

Когда это был 3-й параметр, все было хорошо.

Все было хорошо, пока мне не нужно было передать массив jsons, например: var info = [{name: "test", age: 40},{name: "tester", age: 50}] Независимо от того, что я пробовал, включая использование qs: axios.post(this.serverUrl, null, {params: {dataToSend: info},paramsSerializer: params => { return qs.stringify(params)} и других метод синтаксического анализа 

parseParams(params) {
      const keys = Object.keys(params);
      let options = '';
      keys.forEach((key) => {
        const isParamTypeObject = typeof params[key] === 'object';
        const isParamTypeArray = isParamTypeObject && (params[key].length >= 0);
        if (!isParamTypeObject) {
          options += `${key}=${params[key]}&`;
        }
        if (isParamTypeObject && isParamTypeArray) {      
          params[key].forEach((element) => {
            options += `${key}=${element}&`;
          });
        }      
      });
      return options ? options.slice(0, -1) : options;
    },

Я начал получать вышеуказанную ошибку CORS.

Я предполагаю, что синтаксический анализ неверен, но я не мог понять, как это преодолеть, даже после прочтения так много примеров в Интернете. Мой сервер ожидает получить массив jsons, как указано выше [{name: "test", age: 40},{name: "tester", age: 50}], поэтому мне нужно, чтобы клиент отправил его как таковой. Я использую топор ios 0.19.1

Чего мне не хватает? Спасибо!

Обновление: 

"/api": {
    target: "https://myrealdomain.com:8443",
    changeOrigin: true,          
    pathRewrite: {
        "^/api": "/mysuffix1/mysuffix2"
    }
}

и вызов axios.post("api", {...}) работает, но в реальной жизни файлы будут находиться на том же месте, что и сервер https://myrealdomain.com и мне не нужен суффикс API, только mysuffix1 / mysuffix2.

Могу ли я смоделировать changeOrigin в dev, чтобы он был таким же, как prod?

Ответы [ 2 ]

2 голосов
/ 28 января 2020

Если вы планируете в конечном итоге развернуть приложение Quasar на том же доменном имени, что и API-интерфейс, который вы используете, вы можете избежать необходимости применения правил CORS на этом сервере API во время разработки на localhost:8080, настроив правила прокси-сервера. Когда вы запускаете Quasar в режиме development , используя ...

$ quasar dev

Запускает сервер WebPack Dev . Этот сервер можно настроить через quasar.config.js. Сервер Dev включает в себя прокси-API, который может быть вызван через вызовы из вашего приложения на localhost:8080, который затем перенаправляет их на example.com, изменяя доменное имя в ваших запросах API с помощью этого параметра: changeOrigin: true. Теперь ваш сервер API на example.com видит запросы, которые поступают из того же домена происхождения, поэтому правила CORS не нужны! 

devServer: {
  // https: true,
  port: 8080,
  open: true, // opens browser window automatically
 // set up one or more proxy rules
  proxy: {
    // Proxy requests prefixed by /api URL
    "/api": {
      target: "https://example.com",
      changeOrigin: true,  // Avoids the need for CORS rule on your API server
      // Optionally map /api to the same or a different path on the API server
      pathRewrite: {
        "^/api": "api"
      }
    }
  }
},

Для получения дополнительной информации см. ...

0 голосов
/ 28 января 2020

Вам необходимо включить CORS в вашем API / веб-сервисе. См. Этот вопрос для ответа:

Доступ к XMLHttpRequest по адресу "API_URL" из источника "http://localhost: 8080" заблокирован политикой CORS:

...