React联系页CSP脚本拦截报错 表单无法POST提交问题

根因说明 #

你遇到的两个问题分别由CSP配置错误、React组件代码逻辑错误共同导致，之前自行添加CSP meta标签反而报错，是因为meta配置CSP存在规则限制，且会和服务端返回的CSP响应头叠加取最严格规则，很容易出现规则遗漏/冲突。 #

1. CSP报错修复 #

不要在前端文件中用meta标签配置CSP，优先通过服务端/前端构建工具配置响应头返回CSP规则，开发环境（前后端分别跑在localhost:3000、localhost:3002）可临时使用如下规则：

Content-Security-Policy: 
default-src 'self';
script-src 'self' 'unsafe-inline' 'unsafe-eval' http://localhost:3000;
style-src 'self' 'unsafe-inline';
connect-src 'self' http://localhost:3002;
img-src 'self' data:;

规则说明：

• script-src 放行React热更新、自身脚本的执行，解决脚本被拦截的报错
• connect-src 是核心配置，放行前端向3002端口后端发起的AJAX请求，之前的配置基本都是漏了这一项导致请求被拦截
• 生产环境部署时请删除unsafe-inline、unsafe-eval配置，改用nonce或脚本hash做校验，同时将connect-src中的本地地址替换为正式后端域名。

注意：配置前请先删除之前在index.js/index.html中自行添加的所有CSP相关meta标签，避免规则冲突。 #

2. 表单提交失败代码修复 #

你的组件存在4处明显代码错误，逐一修复即可正常提交：

• 导入错误：类组件不需要引入useState hook，setState是类组件内置方法，不需要单独从react导入
• 方法重复定义：类中写了两个handleSubmit方法，后面的空方法会覆盖前面写了请求逻辑的方法，导致提交无响应
• 表单控件未绑定：三个输入框/文本域没有绑定state值和onChange事件，输入内容无法同步到state，提交时拿不到用户输入的数据
• 重置逻辑错误：表单重置时将state值设为null会触发受控组件警告，应重置为空字符串

修复后的完整组件代码如下：

import React from 'react';
import "./Contactus.css";
import axios from 'axios';

class Contactus extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      name: '',
      email: '',
      message: ''
    }
    // 统一绑定this，避免render中重复bind生成新函数
    this.handleSubmit = this.handleSubmit.bind(this);
    this.onNameChange = this.onNameChange.bind(this);
    this.onEmailChange = this.onEmailChange.bind(this);
    this.onMessageChange = this.onMessageChange.bind(this);
  }
  
  handleSubmit(e){
    e.preventDefault();
    axios({
      method: "POST",
      url:"http://localhost:3002/send",
      data:  this.state
    }).then((response)=>{
      if (response.data.status === 'success') {
        alert("Message Sent.");
        this.resetForm()
      } else if (response.data.status === 'fail') {
        alert("Message failed to send.")
      }
    }).catch(err => {
      console.error('提交请求异常:', err)
    })
  }

  resetForm(){
    this.setState({name: '', email: '', message: ''})
  }

  onNameChange(event) {
    this.setState({name: event.target.value})
  }

  onEmailChange(event) {
    this.setState({email: event.target.value})
  }

  onMessageChange(event) {
    this.setState({message: event.target.value})
  }

  render() {
    return (
      <div className="contact-form-box">
        <h1> Contact Us</h1>
        <form id="contact-form" onSubmit={this.handleSubmit} method="POST">
          <div className="form-group">
              <label htmlFor="name">Name</label>
              <input type="text" className="form-control" id="name" value={this.state.name} onChange={this.onNameChange} />
          </div>
          <div className="form-group">
              <label htmlFor="exampleInputEmail1">Email address</label>
              <input type="email" className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" value={this.state.email} onChange={this.onEmailChange} />
          </div>
          <div className="form-group">
              <label htmlFor="message">Message</label>
              <textarea className="form-control" rows="5" id="message" value={this.state.message} onChange={this.onMessageChange}></textarea>
          </div>
          <button type="submit" className="btn btn-primary">Submit</button>
        </form>
      </div>
    );
  }
}

export default Contactus; 

额外注意事项 #

如果修复后仍然请求失败，请检查后端3002端口的CORS配置，确保允许前端运行端口（一般是localhost:3000）的跨域请求。生产环境如果前后端同域部署，可将axios请求地址改为相对路径/send，不需要写死完整域名端口。

内容的提问来源于stack exchange，提问作者Sarim Zia