Analysis of thinkPHP5 submission form error reporting reasons and solutions

ThinkPHP5 is an open source web application framework based on PHP. Its design concept is simple, intuitive and flexible. However, you may encounter some problems and errors when developing using the ThinkPHP5 framework. Among them, errors in submitting forms are one of the common problems. This article will introduce the reasons and solutions for errors in ThinkPHP5 submission form.

1. Cause of error

In ThinkPHP5, you can use the post method to submit form data, or you can use other methods such as put and delete. However, when submitting form data, an error message sometimes appears: "This HTTP method is not allowed to be submitted", as shown in the figure below.

The reason for this error message is that the browser uses a pre-check mechanism called "OPTIONS". When submitting data using non-simple request methods such as POST and PUT, the browser will first send an OPTIONS request to determine whether the server supports this request method. If the server does not support it, the above error message will appear.

2. Solution

1. Enable cross-domain support

First understand what cross-domain is. Cross-domain refers to executing JavaScript code of one domain name on a web page of another domain name. Strictly speaking, as long as the protocol, domain name, and port are any different, they are all regarded as different domains, and cross-domain problems will occur. When submitting form data, the above error may occur due to cross-domain issues.

The solution is to enable cross-domain support on the server side. In ThinkPHP5, you can add the following code to the configuration file config.php:

// 开启跨域支持
'cross_domain'   => [
    'allow_origin' => ['*'],
    'allow_methods' => ['POST','GET','OPTIONS','PUT','DELETE'],
    'allow_headers' => ['*'],
    'expose_headers'=> ['token'],
    'max_age'       => 3600,
    'allow_credentials' => true,
],

Among them, the allow_origin parameter specifies the allowed domain names, and means that all domain names are allowed. The allow_methods parameter specifies the allowed request methods. Non-simple request methods such as PUT and DELETE also need to be added. The allow_headers parameter specifies the allowed request header information, means accepting any request header. The expose_headers parameter specifies the additional information that users are allowed to obtain, and token indicates that token information is allowed to be obtained. The max_age parameter specifies the time allowed for caching, in seconds. The allow_credentials parameter indicates that identity credentials such as cookies are allowed to be used.

2. Change the request method

If you do not want to enable cross-domain support, you can also solve the problem by changing the request method. When submitting form data, you can change the request method to POST, so as to avoid browser pre-checking problems.

In HTML, you can modify the method attribute of the form like this:

<form method="POST">

In JavaScript, you can modify the type attribute of the ajax request like this:

$.ajax({
    type: 'POST',
    url: 'http://example.com/path/to/api',
    data: postData,
    success: function(data) {
        console.log(data);
    }
});

3. Modify nginx configuration

If the above error occurs when using Nginx as a web server, you can add the following configuration to the nginx.conf file:

location / {
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'POST,GET,OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,token';
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        add_header 'Content-Length' 0;
        return 204;
    }
    ...
}

Among them, Access-Control-Allow-Origin , Access-Control-Allow-Methods, Access-Control-Allow-Headers, Access-Control-Max-Age and other parameters have the same meaning as explained above.

Summary

Errors when submitting form data are a common problem, which may be difficult for beginners to solve. This article introduces the reasons and solutions for errors in submitting forms, hoping to help readers better use the ThinkPHP5 framework.

The above is the detailed content of Analysis of thinkPHP5 submission form error reporting reasons and solutions. For more information, please follow other related articles on the PHP Chinese website!