Узел Js — ошибка политики происхождения Angular Coss в POST / GET / PUT — методах

#javascript #node.js #angular #cross-browser #cross-domain

#javascript #node.js #angular #кросс-браузерный #междоменный

Вопрос:

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

Структура маршрута

-app.js

 const postRoutes = require('./routes/postRoutes');
 

-controller/postController.js

 exposts.createPosts = async(req,res)=>{
  const create = await Post.create(req.body);
           res.status(201).json({
           status:"success",
           data:create
            
       });
  }
 

-routes/postRoutes.js

 router.route('/create-post').post(postController.createPosts);
 

Вот как я создаю новые записи и вставляю данные в базу данных, используя структуру mongoose.

Для вставки данных из пользовательского интерфейса в базу данных я использую axios.

-public/js/main.js

 import {createPostFnc} from './createPost';
  const create_posts= document.querySelector('#form');
       if(create_posts){
           create_posts.addEventListener('submit',(createPos)=>{
              createPos.preventDefault();
    
        const postData = new FormData();
           postData.append('title',document.getElementById('input1').value);
           postData.append('link',document.getElementById('input2').value);
           postData.append('description',document.getElementById('input3').value);
        
    

         createPostFnc(postData );
     });
 }
 

-public/js/createPost.js

 import axios from 'axios';
import { showAlert } from './alert';
import { showAlertPost } from './alert-post'; 

 export const createPostFnc  = async(dataPost) =>{
    try{
       const post = await axios({
          method:"POST",
          url:"{url}/api/v3/posts/create-post",
          data:dataPost
       });
       if(post.data.status === 'success'){
           showAlertPost('post-success','Processing');
           window.setTimeout(()=>{
               location.assign('/persona-profile');
           }, 1500);
        }
      }catch(err){
        showAlert('error','There was a problem creating yout post!!!');
         console.log(err);
    }    
}
 

Пока все хорошо!!!
Но в angular при попытке того же, чтобы создать сообщение после url,
получает эту ошибку.
введите описание изображения здесь

У меня была такая же ошибка с маршрутами создания учетной записи и входа в систему, я решил эту ошибку, добавив app.js .

 //Allow Cross Origin Platform
app.use(function(req ,res ,next){
   res.header("Access-Control-Allow-Origin","*");
   res.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
   res.header("Access-Control-Allow-Headers","Origin, X-Requested-With, Content-Type, Accept, 
    Authorization");
   next();
});
 

Но для почтовых маршрутов это не работает, после того, как я попытался решить проблему с помощью модуля cors

Я пробовал что-то подобное. -routes/postRoutes.js

 const cors = require('cors')

router.route('/create-post').post(cors(),postController.createPosts);
 

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

Обратите внимание: я новичок в node js с опытом работы менее одного года.

Ответ №1:

Правильно установите заголовки

 // Add headers
app.use(function (req, res, next) {

    // Website you wish to allow to connect
    res.setHeader('Access-Control-Allow-Origin', '*');

    // Request methods you wish to allow
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');

    // Request headers you wish to allow
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');

    // Set to true if you need the website to include cookies in the requests sent
    // to the API (e.g. in case you use sessions)
    res.setHeader('Access-Control-Allow-Credentials', true);

    // Pass to next layer of middleware
    next();
}); 

Комментарии:

1. Сегодня я создам маршрут удаления, но для метода post он выдает ошибку 503.