Прокси, включенный в package.json, не работает

У меня есть приложение VUE с серверной частью net.core.

Чтобы избежать проблем с CORS, я хотел бы использовать прокси во всех вызовах. Однако мои попытки не сработали, так как мои звонки никак не проксируются.

Приложение было создано с помощью vue CLI 3 и использовало машинописный текст.

Я пытаюсь добавить в package.json следующие строки, но прокси по-прежнему не работает. Каждый вызов выполняется на один и тот же сервер и не передается через прокси.

"proxyTable": {
    "/api":{
      "target": "http://localhost:5000",
      "changeOrigin": true,
      "pathRewrite": {
        "^/api": ""
      }
    }
  },

"proxy": {
    "/api":"http://localhost:5000"
      }

Ни одна из этих линий не меняет вызывающий порт.

Например, вызов Axios:

Axios.post(process.env.VUE_APP_BASE_URI + 'me', { }, {withCredentials: true})

Где константа определяется как:

VUE_APP_BASE_URI=api/

Постоянная работа, и я могу этим пользоваться. Без константы ошибка такая же.

Есть ли проблема в том, как я написал прокси, или есть что-то еще?

мой package.json:

{
  "name": "xxxxxx",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "proxyTable": {
    "/api":{
      "target": "http://localhost:5000",
      "changeOrigin": true,
      "pathRewrite": {
        "^/api": ""
      }
    }
  },
  "dependencies": {
    "axios": "^0.18.0",
    "bootstrap-vue": "^2.0.0-rc.11",
    "font-awesome": "^4.7.0",
    "register-service-worker": "^1.0.0",
    "vue": "^2.5.17",
    "vue-class-component": "^6.0.0",
    "vue-property-decorator": "^7.0.0",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.0.0",
    "@vue/cli-plugin-pwa": "^3.0.0",
    "@vue/cli-plugin-typescript": "^3.0.0",
    "@vue/cli-service": "^3.0.0",
    "typescript": "^3.0.0",
    "vue-template-compiler": "^2.5.17"
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

Одна из попыток заключалась в использовании рекомендаций в эта страница, но безуспешно.

Я также читал:

Прокси в package.json не влияет на запрос на выборку

Но у меня есть приложение для реагирования, где оно работает. Но не в этом VUE.

Редактировать

Согласно ответу я добавил этот файл:

// vue.config.js
export const devServer = {
    proxy: {
        '/app': {
            target: 'http://localhost:5000/app/',
            ws: true,
            changeOrigin: true
        },
        '/api': {
            target: 'http://localhost:5000/app/api/',
            ws: true,
            changeOrigin: true
        }
    }
};

Тем не менее, прокси не работает.

Это тоже не работает:

  module.exports = {
    devServer: {
      proxy: 'http://localhost:5000/app/'
    }
  }
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
3
0
1 964
1

Ответы 1

При использовании инструментов Vue CLI вы устанавливаете информацию о прокси не в файле package.json, а в файле vue.config.js. Об этом есть документация https://cli.vuejs.org/config/#devserver-proxy

Если у вас нет файла vue.config.js, просто создайте его

Это правильный синтаксис

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://4.3.2.1:8765',
        ws: true,
        changeOrigin: true,
      },
    },
  },
}

Вероятно, ваш ответ в порядке, и в соответствии с документами вы правы. Я просто могу заставить это работать. Попробую сделать минимальный воспроизводимый пример, может у моего проекта проблема ...

gbianchi 17.10.2018 17:10

Другие вопросы по теме