当我尝试使用 Axios 向 Seneca.js API 发出请求时出现内部服务器错误

Question

我写了一个简单的 Seneca 插件，我最终会用它来监听 http 消息：

buyer.js

module.exports = function buyer (){

    this.add('role:buyer, action: acceptOffer', function(msg, respond){
        respond(JSON.stringify({answer: msg.id}))
    })
}

当我运行使用以下脚本时：

index.js

require('seneca')()
    .use(require('./designs/offer/roles/buyer.js'))
    .listen()

我现在可以向 localhost:10101/act 发送 POST 请求并使用插件：

curl -d '{"role": "buyer", "action": "acceptOffer", "id": "12"}' http://localhost:10101/act
{"answer":"12"}

这就是事情变得混乱的地方。我现在想通过网络应用程序发出这个 http 请求，所以我使用 axios 从网页发出这样的请求：

App.vue

<template>
    <div id="app">
        <button @click="sendQuery"></button>
    </div>
</template>

<script>
 import axios from 'axios';

 export default {
     name: 'App',
     data(){
         return {
             postBody: {
                 id: '12',
                 role: 'buyer',
                 action: 'acceptOffer'
             }
         }
     },
     methods: {
         sendQuery: function(){
             var body = JSON.stringify(this.postBody)
             axios.post(`http://localhost:10101/act`, {
                 body: body
             })
         }
     }
 }
</script>

当我单击按钮发送请求时，我从浏览器控制台收到此错误消息（在我启用 CORS 之后）：

xhr.js?ec6c:178 POST http://localhost:10101/act 500 (Internal Server Error)
dispatchXhrRequest @ xhr.js?ec6c:178
xhrAdapter @ xhr.js?ec6c:12
dispatchRequest @ dispatchRequest.js?c4bb:59
Promise.then (async)
request @ Axios.js?5e65:51
Axios.(anonymous function) @ Axios.js?5e65:71
wrap @ bind.js?24ff:9
sendQuery @ App.vue?26cd:26
boundFn @ vue.esm.js?efeb:190
invoker @ vue.esm.js?efeb:2004
fn._withTask.fn._withTask @ vue.esm.js?efeb:1802
createError.js?16d0:16 Uncaught (in promise) Error: Request failed with status code 500
    at createError (createError.js?16d0:16)
    at settle (settle.js?db52:18)
    at XMLHttpRequest.handleLoad (xhr.js?ec6c:77)

谁能告诉我为什么这与 curl 的工作方式不同？为什么我收不到回复？

Answer 1

否则 curl 不起作用，您只是没有在查询中传递所需的 header。底线是服务器应该了解它应该以哪种格式接收数据。我在你的代码中看到你给出了 JSON。因此，通过header.

指定传输数据的格式

比如你应该这样要求：

curl -H "Content-Type: application/json" localhost:10101/act

您的服务器（后端）必须以完全相同的方式响应 header。

问题 CORS - problem a server. If you have problem with CORS，在你的情况下，我认为你的前端工作在不同的端口上，而不是 api。在任何情况下，您都不需要为 front-end 端的 CORS 传输 header（尽管有人正在尝试这样做并且通常这是浪费时间).您只需要监控传输的数据类型即可。

参见示例 Axios get/post（没关系）：

const configAxios = {
  headers: {
    'Content-Type': 'application/json',
  },
};
axios.post('api/categories', configAxios)
  .then((res) => {
    this.categories = res.data;
    console.log(res);
  })
  .catch((err) => {
    console.warn('error during http call', err);
  });

在您的代码中使用 JSON.stringify，请不要这样做，因为 Axios 已经使用了此功能。

服务器端

例如server-side。我喜欢Symfony4，它用的是NelmioCorsBundle，看看allow_origin: ['*']。这很简单，如果你使用 Symfony。

nelmio_cors:
    defaults:
        allow_credentials: false
        allow_origin: ['*']
        allow_headers: ['Content-Type']
        allow_methods: []
        expose_headers: []
        max_age: 0
        hosts: []
        origin_regex: false
        forced_allow_origin_value: ~
    paths:
        '^/api/':
            allow_origin: ['*']
            allow_headers: ['X-Custom-Auth', 'Content-Type', 'Authorization']
            allow_methods: ['POST', 'PUT', 'GET', 'DELETE']
            max_age: 3600
        '^/':
            origin_regex: true
            allow_origin: ['^http://localhost:[0-9]+']
            allow_headers: ['X-Custom-Auth', 'Content-Type']
            allow_methods: ['POST', 'PUT', 'GET', 'DELETE']
            max_age: 3600
            hosts: ['^api\.']

如果您不直接使用服务器，请与您的供应商核实这种细微差别。

这个header也可以通过例如Nginx来传输，这不是最好的主意。

例如，查看：

add_header Access-Control-Allow-Origin *;

server {
    listen 8080;
    server_name site.local;
    root /var/www/site/public;

    location / {
       add_header Access-Control-Allow-Origin *;

        # try to serve file directly, fallback to index.php
        try_files $uri /index.php$is_args$args; 
    }

    location ~ ^/index\.php(/|$) {
        fastcgi_pass unix:/var/run/php/php7.2-fpm.sock;
        fastcgi_split_path_info ^(.+\.php)(/.*)$;
        include fastcgi_params;
        # When you are using symlinks to link the document root to the
        # current version of your application, you should pass the real
        # application path instead of the path to the symlink to PHP
        # FPM.
        # Otherwise, PHP's OPcache may not properly detect changes to
        # your PHP files (see https://github.com/zendtech/ZendOptimizerPlus/issues/126
        # for more information).
        fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
        fastcgi_param DOCUMENT_ROOT $realpath_root;
        # Prevents URIs that include the front controller. This will 404:
        # http://domain.tld/index.php/some-path
        # Remove the internal directive to allow URIs like this
        internal;
    }

    # return 404 for all other php files not matching the front controller
    # this prevents access to other php files you don't want to be accessible.
    location ~ \.php$ {
        return 404;
    }

    error_log /var/log/nginx/project_error.log;
    access_log /var/log/nginx/project_access.log;
}

值得注意的是，如果没有数据传递，它会删除Content-Type。数据必须始终传输或 null。这很奇怪，而且具有误导性。

Answer 2

以下代码有很多问题：

var body = JSON.stringify(this.postBody)
axios.post(`http://localhost:10101/act`, {
  body: body
})

首先，axios.post()returns一个Promise。如果您的方法是异步的，您应该 await axios.post(…) 并标记您的方法 async 或 return axios.post(…).

其次，如果你看到axios docs for axios.post()，第二个参数就是postData本身。您指示 AXIOS 做的是将此 JSON 作为正文发送：

{"body":"{\"id\":\"12\",\"role\":\"buyer\",\"action\":\"acceptOffer\"}"}

即，您 1. 将要发送的对象包装在另一个对象中 2. 对数据进行双重字符串化。考虑一次解析的结果（seneca 会为你做）：

> JSON.parse(s)
{ body: '{"id":"12","role":"buyer","action":"acceptOffer"}' }

上面的 body 键是字符串的数据是 Seneca 正在发送的内容，您必须为其创建处理程序。在你的处理程序中，你将不得不再次 unescape body:

> JSON.parse(JSON.parse(s).body)
{ id: '12', role: 'buyer', action: 'acceptOffer' }

但是，我不知道为什么这会导致 Seneca.js 本身出错。 seneca 可能会抛出错误，因为您没有为 body 属性带有字符串值的模式设置任何处理程序。也许如果你做这样的事情（我不知道如何在 seneca 中接受字符串值作为模式，这可能是错误的）：

this.add('body:string', function(msg, respond){respond({value: msg.body})});

猜测

也许您打算编写传递未转义数据的 axios 调用，以便 axios 将其正确编码为 JSON：

var body = this.postBody; // Note *NOT USING JSON.stringify()*
axios.post('http://localhost:10101/act', body); // Note *NOT PASSING body KEY*

并且在你的处理程序中你也不应该对结果进行双重编码（可能不确定 seneca 是如何工作的）：

module.exports = function buyer (){
    this.add('role:buyer, action: acceptOffer', function(msg, respond){
        respond({answer: msg.id}) // Note *NOT USING JSON.stringify*
    })
}

Answer 3

是的，在本地测试过，你的问题确实是stringify的问题，正如我评论中所说，直接发送数据即可：

axios.post('http://localhost:10101/act', this.postBody)

Answer 4

您的axios请求header必须包含

header {
    'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8;application/json'
}

这对我有用。

当我尝试使用 Axios 向 Seneca.js API 发出请求时出现内部服务器错误

getting an internal server error when I try to make a request to a Seneca.js API using Axios

http

node.js

vue.js

axios

seneca

服务器端

猜测