[英]Why does my POST request in Postman work fine but when not on the client side (browser)?
我有一个 Laravel 和 React.js 项目,它们是独立的代码库。 当我使用登录端点登录 Postman 然后使用另一个端点(两者都是 POST 请求)上传文件名时, filePath
、 email
和user_id
已成功存储在数据库中。
但是,当我在浏览器上尝试此操作时 - 我得到了200
但奇怪的是,数据库中没有存储任何内容。
在 Postman 中,它以某种方式检测用户登录的内容,这使我可以毫无问题地将上述信息存储到数据库中。
我在前端和后端代码中做错了什么,不允许我在浏览器上执行此操作? 我已经用这个撞了一堵墙,不知道从哪里开始。
仅供参考: dd($user);
返回正确的信息。
如果您需要更多信息,请告诉我:)
这是我的Upload.js
文件:
import React, {Component} from 'react';
import axios from 'axios';
class Upload extends Component {
constructor(props) {
super(props);
this.state = {
selectedFile: null,
id: null,
email: ''
};
this.onFormSubmit = this.onFormSubmit.bind(this);
this.onChange = this.onChange.bind(this);
this.fileUpload = this.fileUpload.bind(this);
}
componentDidMount() {
console.log("Inside componentDidMount()");
let id = localStorage.getItem("id");
let email = localStorage.getItem("email");
this.setState({
id: id,
email: email
})
console.log(id);
console.log(email);
}
onFormSubmit(e) {
e.preventDefault();
this.fileUpload(this.state.selectedFile);
}
onChange(e) {
this.setState({ selectedFile: e.target.files[0] }, () => this.state.selectedFile);
}
fileUpload(file) {
const formData = new FormData();
const accessToken = localStorage.getItem("access_token").slice(13,-8);
console.log(accessToken);
console.log(this.state.id);
console.log(this.state.email);
console.log(file.name);
formData.append('file',file);
const headers = {
'Authorization' : 'Bearer ' + accessToken,
'Content-type': 'multipart/form-data'
}
axios.post('http://127.0.0.1:8000/api/auth/wall-of-fame', formData, {headers})
.then(response => {
console.log(response);
}).catch(error => {
console.log(error);
});
}
render() {
return (
<form encType='multipart/form-data' id="login-form" className="form" >
<input type="file" name="file" onChange={this.onChange}/>
<button type="submit" onClick={this.onFormSubmit}>Upload</button>
</form>
);
}
}
export default Upload;
这是我的FileUploadController.php
文件:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\DB;
class FileUploadController extends Controller {
public function store(Request $request) {
$user = Auth::user();
// dd($user);
if($user) {
$user_id = Auth::user()->id;
$email = Auth::user()->email;
$filePath = $request->file('file')->getClientOriginalName();
$data = [
'file_path' => $filePath,
'user_id' => $user_id,
'email' => $email
];
DB::table('mydb.photos')->insert($data);
}
return response()->json($user);
}
}
这是我的api.php
文件:
Route::middleware('auth:api')->group(function () {
Route::get('/user', function (Request $request) {
return $request->user();
});
});
Route::group([
'prefix' => 'auth'
], function () {
Route::post('login', 'AuthController@login');
Route::post('signup', 'AuthController@signup');
Route::post('wall-of-fame', 'FileUploadController@store');
Route::group([
'middleware' => 'auth:api'
], function() {
Route::get('logout', 'AuthController@logout');
Route::get('user', 'AuthController@user');
Route::get('wall-of-fame', 'FileUploadController@fileUpload');
});
});
我认为您可以尝试使用"Access-Control-Allow-Origin: *"
设置响应的 header
您可以阅读此链接以获取更多信息跨域请求被阻止
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.