Почему после установки Access-Control-Allow-Origin на стороне сервера все еще возникает перекрестная ошибка? - PullRequest
Новая
       19

Почему после установки Access-Control-Allow-Origin на стороне сервера все еще возникает перекрестная ошибка?

0 голосов
/ 09 ноября 2019

Я просто запускаю демонстрацию перекрестного происхождения CORS. Эта демонстрация выполняется с помощью node.js. Вот index.html: 

<button>click to cross origin using CROS</button>
<p>hello world ?</p>
<script>
    var btn = document.getElementsByTagName('button')[0];
    var text = document.getElementsByTagName('p')[0];
    btn.addEventListener('click', function () {
        var xhr = new XMLHttpRequest();
        var url = 'http://localhost:3001';    
        xhr.open('PUT',url,true);                
        xhr.send();                       
        xhr.onreadystatechange = () => {     
            if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {  
                text.innerHTML = xhr.response;
            }
        }
    })
</script>

Вот serverRes.js: 

var express = require('express');
var app = express();
var responsePort = 3001;  
app.get('/', (req, res) => {
    res.set('Access-Control-Allow-Origin', 'http://localhost:3000'); 
    res.send("Hello world from CROS.?");  
});

app.listen(responsePort, function () {
    console.log('cros_responser is listening on port '+ responsePort);
});

Вы можете видеть, что я установил Access-Control-Allow-Origin с помощью http://localhost:3000, поэтомуответ на предварительно выданный запрос должен фактически пройти проверку контроля доступа, что означает, что запрос все равно будет успешным. Но когда я иду на порт 3000, я получаю:

enter image description here

Но почему? Почему после установки Access-Control-Allow-Origin на стороне сервера все еще возникает перекрестная ошибкаКроме того, я попытался написать: 

app.all('/', function (req, res, next) {
    res.header('Access-Control-Allow-Origin', 'http://localhost:3000');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.send("Hello world from CROS.?");   
    next(); // pass control to the next handler
});

в соответствии с Почему добавление заголовков CORS в маршрут OPTIONS не позволяет браузерам получать доступ к моему API? . Но ошибка все еще существует.

Ответы [ 2 ]

1 голос
/ 09 ноября 2019

Код, который вы разместили, должен работать. 

var express = require('express');
var app = express();
var responsePort = 3001;  


app.all("/", function(req, res, next){
  res.header('Access-Control-Allow-Origin', 'http://localhost:3000');
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
  next();
});


app.get('/', (req, res) => {
    res.set('Access-Control-Allow-Origin', 'http://localhost:3000'); 
    res.send("Hello world from CROS.?");  
});

app.listen(responsePort, function () {
    console.log('cros_responser is listening on port '+ responsePort);
});

Попробуйте вместо этого нажать на этот ответ.

https://repl.it/@nithinthampi/WirelessGentleSigns

0 голосов
/ 09 ноября 2019

вам также нужно разрешить глаголы http с заголовком Access-Control-Allow-Methods: 

res.header('Access-Control-Allow-Origin', 'http://localhost:3000');
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');

Этот ответ содержит более подробное описание: Почему не добавляются заголовки CORS в маршрут OPTIONSбраузеры для доступа к моему API?

...