Hello i’ve been developing a MERN app, instead of MongoDB is MySQL, so its MySQl ERN app.
My site is a simple blog, post blogs with a name, and the content of the blog.
So i implemented CORS while developing all in localhost (server and frontend sides). Everything works fine
So i deploy my app, the server side of the page is located on Render host service, and the Frontend side is located on Netlify
When i do a POST request through axios to post a blog, CORS error and the following: “Response to preflight request doesn’t pass access control check: It does not have HTTP ok status.” That didn’t happen when I made all the requests with localhost (server and frontend side).
I have some theories but i dont know how to solve none of those: send a 200 status, implement some headers into CORS
My code to do the POST request is the following:
index.js
import express from 'express'
import cors from 'cors'
import {PORT} from './config.js'
import indexRoutes from './routes/index.routes.js'
import blogRoutes from './routes/blogs.routes.js'
const app = express()
app.use(express.json())
app.use(cors({origin: true}))
app.use(indexRoutes)
app.use(blogRoutes)
app.listen(PORT)
console.log(`server running on port ${PORT}`)
blogapi.js
export const createBlogRequest = async (blog) =>{
await axios.post('https://fullstack-mern-blog.onrender.com/blogs', blog)
}
Poster.jsx
import React, { useEffect, useState } from "react";
import { createBlogRequest } from "../api/blosg.api";
import { useParams } from "react-router-dom";
function Poster() {
const [newUser, setNewUser] = useState("");
const [newPost, setNewPost] = useState("");
const params = useParams()
const handleSubmit = async (e) => {
e.preventDefault();
console.log(targeted)
try {
const response = await createBlogRequest(targeted)
console.log(response)
} catch (error) {
console.error(error)
}
setNewUser('')
setNewPost('')
}
const targeted = {name: newUser, post: newPost}
return (
<>
<h1>{params.id ? "edita el post" : "Postea algo "}</h1>
<form onSubmit={handleSubmit}>
<input
type="text"
name="user"
placeholder="escribi tu nombre..."
onChange={(e) => setNewUser(e.target.value)}
value={newUser}
/>
<br />
<textarea
name="post"
cols="30"
rows="10"
placeholder="escribi algo dale..."
onChange={(e) => setNewPost(e.target.value)}
value={newPost}
></textarea>
<br />
<button type="submit">Subir</button>
</form>
</>
);
}
export default Poster;
Any answer will be received
mini1012 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.