Question

我在Netlify上部署了一个nuxt项目，现在我想添加新闻通讯（在Mailchimp上向我的听众添加订阅者）。为此，我选择使用AWS无服务器lambda函数。老实说，这是我第一次听说无服务器功能。我找到了本教程https://hashinteractive.com/blog/nuxt-js-mailchimp-integration-add-contact-to-list/，最后，我决定对Postman进行测试。我已经在http：// localhost：8888 / .netlify / functions / subscribe上发布了一个帖子，并且它起作用了。但是，当我使用axios尝试相同的操作时，出现错误405（不允许使用该方法）。

Newsletter.vue

      <form @submit.prevent='submitNewsletter' class="newsletter__form" >
            <input type="email" placeholder="E-mail" class="newsletter__form-input" v-model="email">
            <button class="newsletter__form-button" type="submit">Subscribe</button>
        </form>
    </div>
</template>

<script>
import axios from 'axios';
export default {
    data(){
        return{
            email: ''
        }
    },
    methods:{
        
        submitNewsletter(){
            
            axios.post('http://localhost:8888/.netlify/functions/subscribe', { email: this.email}, {
                headers: {
                    methods: 'POST',
                    'Content-Type':'application/json'
                }
            })
            .then(function (response) {
                console.log(response);
            }).
            catch((error) =>{
                console.log('The error:' + error)
            })
            
            this.$toasted.success("Thank you for your subscription !!!", { 
                theme: "toasted-primary", 
                position: "top-left", 
                containerClass: 'myContainer',
                fitToScreen: true,
                fullWidth: true,
                duration : 5000
            });  
        
        }
    }

}
</script>

功能>订阅> subscription.js

const fetch = require('node-fetch'); 
const base64 = require('base-64'); 


exports.handler = async (event, context) => { 
  // Only allow POST
  if (event.httpMethod !== 'POST') { 
    return { statusCode: 405, body: 'Method Not Allowed' };
  }
  const errorGen = msg => {
    return { statusCode: 500, body: msg }; 
  }; 
  try { 
    const { email } = JSON.parse(event.body);
    console.log(email);
    if (!email) { 
      return errorGen('Missing Email');
    } 
    const subscriber = { 
      email_address: email, 
      status: 'subscribed', 
    }; 

    console.log(subscriber);
    console.log(JSON.stringify(subscriber));

    const creds = `blooming-thoughts:${process.env.MAILCHIMPS_API_KEY}`;
    const response = await fetch(`https://us20.api.mailchimp.com/3.0/lists/${process.env.AUDIENCE_ID}/members/`, { 
      method: 'POST', 
      headers: { 
        Accept: '*/*', 
        'Content-Type': 'application/json', 
        Authorization: `Basic ${base64.encode(creds)}`, }, 
      body: JSON.stringify(subscriber), 
     
    }); 
    const data = await response.json();
    
    if (!response.ok) { 
      // NOT res.status >= 200 && res.status < 300 
      return { statusCode: data.status, body: data.detail }; 
    }
    return { 
      statusCode: 200, 
      body: JSON.stringify({ msg: "You've signed up to the mailing list!", detail: data, }), 
    }; 
  } catch (err) { 
    console.log(err); // output to netlify function log 
    return { 
      statusCode: 500, 
      body: JSON.stringify({ msg: err.message }),
    };
  } 
};

我的netlify.toml

[build]
publish = "dist"
functions = 'functions'

我已经推送到我的存储库并构建了netlify，而没有任何错误，但是当我尝试从自己的站点添加新闻时，没有任何反应。

Answer 1

我已经解决了我的问题。如果您像我一样遇到麻烦，请按照以下步骤操作：

在您的根目录中创建一个名为functions的文件夹，然后创建index.js（文件名取决于您）。
创建一个名为netlify.toml的文件，并添加以下代码：

[构建] 功能=“功能”
然后，在index.js中放入将与您的API通信的代码
在vue组件上，向<your-site> /。netlify / functions / index发出发布请求。您可以在netlify dashbord上找到要使用功能的端点。

别忘了在Netlify（构建和部署）上注册您的env变量。

我的POST请求适用于Postman，但不适用于axios

1 个答案: