时间戳

首页 > 解决方案 > Node Js - Angular Coss Origin Policy Error on - POST/GET/PUT - 方法

javascript - Node Js - Angular Coss Origin Policy Error on - POST/GET/PUT - 方法

问题描述

我在 node js 中创建了一个带有后端的网站，但目前有人还负责开发 Angular 应用程序。例如创建帖子的节点结构。

路线结构

-app.js

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

-控制器/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);

这就是我使用猫鼬结构创建新帖子并将数据插入数据库的方式。

要将数据从 UI 插入数据库，我使用 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);
    }    
}

到目前为止，一切都很好！！！但是在角度上，当尝试在 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新手。

标签： javascriptnode.jsangularcross-browsercross-domain

解决方案

正确设置标题

// 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();
});

推荐阅读