Если вы не знаете, как решить междоменную проблему, я очень зол

опрос
Если вы не знаете, как решить междоменную проблему, я очень зол

Позвольте мне рассказать вам историю.

Когда два года назад этот шлак впервые вышел на стажировку, я как-то ходил в компанию на собеседование.

Интервьюер спросил меня: «Что такое междоменный домен?»

Я: «Междоменное поведение вызвано политикой браузера в отношении одного и того же источника; если протокол, имя домена и порт отличаются, будет создано междоменное взаимодействие».

Интервьюер: "Ну да ладно, тогда как решить междоменную проблему, какие есть методы?"

я: "JSONP и CORS"

Интервьюер: «Хорошо, а как они это делают?»

Я: «Ну… Я только знаю, что они могут решать междоменные проблемы, но я их не реализовывал, не знаю».

Интервьюер: «О, хорошо, давайте поговорим об этом здесь сегодня, вернитесь и подождите уведомления».

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

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

Пусть этот шлак расскажет вам, как JSONP и CORS решают междоменные проблемы.

JSONP

Так называемый JSONP — это функция, при которой на интерфейс не влияет стратегия коммуникации через тег скрипта, встраивание обратного вызова в интерфейс API и отправка его на сервер, а затем сервер получает обратный вызов, выполняет написание и помещает необходимые данные в параметры обратного вызова.Наконец, сервер возвращает функцию браузеру, поэтому этот междоменный метод требует взаимодействия фронтенда и бэкенда

Следующий шлак восстанавливает приведенное выше описание через код

внешний интерфейс

 <script>
    function callback(data){
        console.log(data)
    }
</script>
<script src="http://localhost:3000?callback=callback"></script>

Внешний интерфейс определяет функцию обратного вызова, называемую обратным вызовом, а затем вставляет имя обратного вызова в API и отправляет его на сервер.

Сервер (этот шлак использует NODE в качестве демонстрации сервера)

const express = require('express')

const app = express()

app.get('/', (req,res) => {

    let callback = req.query.callback

    res.send(`${callback}(${JSON.stringify({
        success:0,
        data:{
            name:"yuefengsu"
        }
    })})`)

})

app.listen(3000, () => { console.log('开启了') })

Сервер принимает отправленное имя обратного вызова, затем выполняет его и помещает необходимые данные в параметры обратного вызова и возвращает их клиенту.

результат:

CORS

Так называемый CORS реализуется сервером путем установки заголовка ответа (например, Access-Control-Allow-Origin: то есть установка данных ответа для этого домена запроса; Access-Control-Allow-Methods: указание, какие методы могут быть использован для запроса домена запроса для домена запроса). сервер), поэтому этот метод, сервер может быть выполнен в одностороннем порядке

Следующий шлак восстанавливает приведенное выше описание через код

внешний интерфейс

 <script>
        
        let xhr = new XMLHttpRequest()

        xhr.open('GET','http://localhost:3000/',true)

        xhr.onreadystatechange = function(){

            if(xhr.readyState === 4 && xhr.status === 200){

                console.log(xhr.responseText)

            }

        }

        xhr.send(null)

    </script>

Здесь внешний интерфейс отправляет запрос GET на указанный сервер через AJAX.

Сервер

const express = require('express')

const app = express()

app.all('*', function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*")
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS")
    res.header("Content-Type", "application/json;charset=utf-8")
    next()
})

app.get('/', (req,res) => {
    res.json({
        success:0,
        data:{
            name:"yuefengsu"
        }
    })

})

app.listen(3000, () => { console.log('开启了') })

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

результат

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

🇨🇳Давай за Родину, давай за Ухань, если есть страна, есть дом, мы вместе 🇨🇳.

Категории