На основе vue-cli3/cli4 для решения междоменной проблемы внешнего интерфейса с использованием axios.

axios

Важное дополнение:

из-заdevServer.proxyОн основан на среде разработки, поэтому в настоящее время используетсяdevServer.proxyВ качестве прокси-инструмента для работы с междоменными объектами его пока можно решить только в среде разработки. Если это пакетная среда, ее необходимо отлаживать совместно с серверной частью. Если есть лучший способ, пожалуйста, сделайте не стесняйтесь давать советы~

задний план

Используется в проекте vue-cli4axiosПри запросе внутреннего интерфейса браузер сообщает о междоменной ошибке

1. Что такое междоменный

1.1 Междоменный

Это означает, что браузер не может выполнять сценарии с других веб-сайтов. Это вызвано политикой браузера о том же происхождении, ограничением безопасности, наложенным браузером на javascript.

1.2 Политика единого происхождения

Это означает, что протокол, имя домена и порт должны быть одинаковыми, а если один из них отличается, то это приведет к междоменному При запросе данных браузер сообщит об исключении в консоли, указывая на то, что доступ запрещен. отклонен.

1.3 Почему появляется перекрестный домен

Внутренний код запускается на сервере A, а интерфейсный код запускается на компьютере B. В это время происходит междоменное взаимодействие.Сервер и сервер могут запрашивать данные друг у друга, понятия кроссдоменности нет (если сервер не ставит задачу запретить кроссдоменность)

2. Настройте прокси axios для решения междоменной проблемы (чистый интерфейс решает междоменную проблему)

Идеи для решения междоменных проблем:

Мы можем настроить прокси-сервер для запроса данных с другого сервера, а затем вернуть запрошенные данные на наш прокси-сервер, а прокси-сервер возвращает данные нашему клиенту, чтобы мы могли получать доступ к данным через домены.

2.1 Настройка базового URL-адреса

// main.js

import axios from 'axios'
Vue.prototype.$axios = axiosd
axios.defaults.baseURL = '/api'

проиллюстрировать:axios.defaults.baseURL = '/api'Эффект состоит в том, что каждый раз, когда запрос отправляется, он приносит/apiприставка

2.2 Настройка прокси

Описание документа официального конфигурационного прокси

// vue.config.js

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: '//111.222.333.444:8888',// 你要请求的后端接口ip+port
                changeOrigin: true,// 允许跨域，在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
                ws: true,// 开启webSocket
                pathRewrite: {
                    '^/api': '',// 替换成target中的地址
                }
            }
        }
    }
}

2.3 Отправка запросов в компонентах

// 原接口url：http://111.222.333.444:8888/test
// 原请求写法：this.$axios.get('http://111.222.333.444:8888/test')

// 配置proxy代理后请求写法
this.$axios.get('/test')

Обоснование: мы просим/test, что эквивалентно запросу:localhost:8080/api/test, а потом настроенный прокси перехватил/api, и положи/apiи все предыдущие заменены наtarget, поэтому фактический запрошенный URL-адресhttp://111.222.333.444:8888/test

2.4 Перезапустите проект vue, междоменная проблема решена

Примечание. В инструменте отладки браузера URL-адрес запроса после прокси-прокси будет изменен и отображен какhttp://localhost:8080/api/test, и не будет отображать ссылку запроса перед прокси

Категории