我的react应用程序中的表单标签下载php文件。 怎么修？

Question

I am developing a react application which gives information about travel attractions in that country which user selects.

Currently, my app coummnicates to the server with <form> tag.

This is my react code:

class App extends React.Component{
submitForm = (e)=>{
}
render(){
    return(
        <div>
            <section id="Search" onSubmit={this.submitForm}>
                <form action="/public/server/search.php" method="GET">
                    <input placeholder="search country, attraction names" type="text" name="search"/>
                    <button type="submit">SEARCH</button>
                </form>
            </section>
            <ItemList/>
        </div>
    )
}

}

php file: This is just test code. For checking if my php file works.

<?php
 $message = "wrong answer";
 echo "<script type='text/javascript'>alert('$message');</script>";
?>

There is no problem with the URL.

Problem is when a user submits, the browser downloads php file instead of running it.

I googled and found that if it downloads, there is some problem with my webserver configuration.

Submit button is downloading the php instead of running it

and

Form submit, downloads php

But how can I fix the configuration problem whem I am running the file and localhost with npm start? not Apache? or is it same?

I tried to run my file with apache webserver (I already have XAMPP) but it shows 404 error because it doesn't find bundle.js (webpack file).

Here is my package.json file:

{
"name": "ReactExample",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "webpack-dev-server --config ./webpack.config.js --mode 
   development"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"webpack": "^4.16.0",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^3.1.4"
},
"babel": {
  "presets": [
    "env",
    "react",
    "stage-2"
  ]
},
"dependencies": {
  "classnames": "^2.2.6",
  "react": "^16.4.1",
  "react-dom": "^16.4.1",
  "react-redux": "^5.0.7",
  "redux": "^4.0.0"
}
}

Answer 1

a request going to your webserver usually hits index.php or .html and so on. with a standard webserver configuration the index file needs to be located in your webservers root directory which is, if you are using xampp, the htdocs/ directory. so basically you can only run one project with the standard configuration. if you have to run multiple projects you have to configure the vhosts for apache.

well what happens is that you are trying to hit "http://localhost:80/public/server/search.php" with your request and expect php to execute this file but in fact the only entrypoint to your application is the index file in your root directory.

so to clarify, all these links below are actually hitting the servers index.php and not any .php files in subdirectories:

• http://awesomedomain.com/posts/show/1
• http://awesomedomain.com/contact
• http://awesomedomain.com/downloads/catpics

there is a configuration file called .htaccess (apache specific) which takes care of alot of things, a few of them are passing parameters to the entrypoint and rewriting the actual url. (if configured)

so what you can do is... just hit your index.php which should be located in the htdocs/ directory instead of /public/server/search.php and return some values of your choice.

dont get confused by modern frameworks were the index.php is located in a subdirectory, its just a more secure approach and the entrypoint can be configured.

The main XAMPP configuration files are located as follows:

apache configuration files:

• \xampp\apache\conf\httpd.conf
• \xampp\apache\conf\extra\httpd-xampp.conf

php configuration file:

• \xampp\php\php.ini

mysql configuration file:

• \xampp\mysql\bin\my.ini