Client и API на Localhost

venzo 1 Точки

Client и API на Localhost

Здравейте,

Искам да подкарам React приложение и Express API, което да ми изпълнява заявките на localhost с различни портове, но получавам следната грешка в браузъра:

Cross-Origin Read Blocking (CORB) blocked cross-origin response http://localhost:1234/external with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.

Разбирам, че трябва да се позволят заявките между отделни домейни, но не ми е ясно как става това.

Код на клиента:

fetch('http://localhost:1234/external', {
 headers: { 'Content-Type': 'application/json'},
 mode: 'no-cors' 
})
  .then(res => JSON.stringify(res))
  .then(data => console.log(data));

Код на сървъра:

let data = {data: "API request success"};
 module.exports = (req, res) => { 
 console.log("External request");
 if (req.pathname === '/external' && req.method === 'GET'){
 res.writeHead(200, { 
  'content-type':'application/json', 
  'access-control-allow-origin': 'http://localhost:3000', 
  "Access-Control-Allow-Headers": "Content-Type" });
  res.write(data);
  res.end(); }
 else { return true } };

Поздрави!

Тагове:

26/08/2018 19:19:17 Module: JS Advanced 26/08/2018 19:48:35

dvdty 497 Точки

{ 'content-type':'application/json', 'access-control-allow-origin': 'http://localhost:3000', "Access-Control-Allow-Headers": "Content-Type" }

Това не е валиден JSON. Само двойни кавички работят. Не съм сигурен дали е само там проблема, но след като си въвел MIME type json, а имаш грешка MIME type text/html, не мисля, че се разпознава както трябва.

Можеш да валидираш JSON с някой web tool, като: https://jsonlint.com/

-1

26/08/2018 19:28:18 26/08/2018 19:28:29

Jeliozver 356 Точки

Прав е голегата, че не е валиден JSON data обекта. Пробвай първо да го промениш на

let data = {"data": "API request success"};

или

res.write(JSON.stringify(data));

Но след като си на експрес защо си пишеш ти хедърите? Express трабва да го прави автоматично за теб.

Препоръчвам ти да си инсталираш библиотеките body-parser и cors.

const EXPRESS = require('express');
const BODY_PARSER = require('body-parser');
const CORS = require('cors');

const APP = EXPRESS();

APP.use(BODY_PARSER.urlencoded({ extended: true }));
APP.use(BODY_PARSER.json());
APP.use(CORS());

И така кода в if-а може да остане само това

res.status(200).json(data);

И то само би трябвало да свърши останалата работа.

27/08/2018 08:43:54 27/08/2018 08:52:33

venzo 1 Точки

Колеги, благодаря и на двама Ви. Поствам като референция за други, които може да имат такъв проблем:

Клиент

const fetch = require('node-fetch');

fetch("http://localhost:1234")
    .then(res => res.json())	
    .then(body => console.log("response: ", body));

Сървър

var express = require('express')
var app = express()

app.get('/', function (req, res) {
	console.log("Request received");
    res.json({name: "Admin is here"})
}).listen(1234);

console.log("Server listen on port: 1234")

29/08/2018 09:42:51