Ik heb proxy toegevoegd in package.json en het werkte prima, maar na npm run build is het CORS-probleem weer opgedoken, weet iemand hoe om te gaan met het CORS-probleem na npm run build in React.
Ik heb op verschillende manieren geprobeerd om headers toe te voegen aan axios-verzoeken. Ik heb echter ‘Access-Control-Allow-Origin’:’*’ niet toegevoegd aan het axios-verzoek. Mijn code is als volgt:
pakket.json
"proxy": {
"*":{ "target" : "http://myurl"}
}
GetData.js
axios.defaults.baseURL = 'http://myurl';
axios.defaults.headers.post['Content-Type'] ='application/json;charset=utf-8';
axios.defaults.headers.post['Access-Control-Allow-Origin'] = '*';
axios.get(serviceUrl, onSuccess, onFailure)
.then(resp => {
let result = resp.data;
onSuccess(result);
})
.catch(error => {
if(onFailure) {
return onFailure(error);
}
})
}
Opmerking: het is ingeschakeld vanaf de serverzijde, het werkt nog steeds niet. Momenteel kan ik de code niet wijzigen vanaf de serverzijde, mijn werk is beperkt tot alleen de clientzijde.
Antwoord 1, autoriteit 100%
uw server moet de cross origin-verzoeken inschakelen, niet de client. Om dit te doen, kun je deze mooie paginamet implementaties en configuraties voor meerdere platforms bekijken
Antwoord 2, autoriteit 9%
Kan nuttig zijn voor iemand:
Ik stuur gegevens van een react-toepassing naar een golang-server.
Zodra ik dit heb gewijzigd, w.Header().Set("Access-Control-Allow-Origin", "*"), was de fout verholpen.
reageer formulier Functie verzenden:
async handleSubmit(e) {
e.preventDefault();
const headers = {
'Content-Type': 'text/plain'
};
await axios.post(
'http://localhost:3001/login',
{
user_name: this.state.user_name,
password: this.state.password,
},
{headers}
).then(response => {
console.log("Success ========>", response);
})
.catch(error => {
console.log("Error ========>", error);
}
)
}
Go Server heeft router,
func main() {
router := mux.NewRouter()
router.HandleFunc("/login", Login.Login).Methods("POST")
log.Fatal(http.ListenAndServe(":3001", router))
}
login.go,
func Login(w http.ResponseWriter, r *http.Request) {
var user = Models.User{}
data, err := ioutil.ReadAll(r.Body)
if err == nil {
err := json.Unmarshal(data, &user)
if err == nil {
user = Postgres.GetUser(user.UserName, user.Password)
w.Header().Set("Access-Control-Allow-Origin", "*")
json.NewEncoder(w).Encode(user)
}
}
}
Antwoord 3, Autoriteit 6%
Ik ben met hetzelfde probleem tegengekomen. Toen ik het inhoudstype veranderde, heeft het opgelost. ik weet het niet zeker
Deze oplossing zal u helpen, maar misschien is het. Als je het niet erg vindt over inhoudstype, werkte het voor mij.
axios.defaults.headers.post['Content-Type'] ='application/x-www-form-urlencoded';
Antwoord 4, autoriteit 2%
Ik kreeg dezelfde CORS-fout tijdens het werken aan een Vue.js-project. U kunt dit oplossen door een proxyserver te bouwen of u kunt op een andere manier de beveiligingsinstellingen van uw browser (bijv. CHROME) uitschakelen voor toegang tot cross-origin-apis (dit is een tijdelijke oplossing en niet de beste manier om het probleem op te lossen). Beide oplossingen hadden voor mij gewerkt. De latere oplossing vereist geen mock-server of een proxyserver om te bouwen. Beide oplossingen kunnen aan de voorkant worden opgelost.
U kunt de Chrome-beveiligingsinstellingen uitschakelen voor toegang tot api’s vanuit de oorsprong door de onderstaande opdracht op de terminal te typen:
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --user-data-dir="/tmp/chrome_dev_session" --disable-web-security
Na het uitvoeren van de bovenstaande opdracht op uw terminal, wordt een nieuw Chrome-venster geopend met uitgeschakelde beveiligingsinstellingen. Voer nu uw programma (npm run serve / npm run dev) opnieuw uit en deze keer krijgt u geen CORS-fout en kunt u een GET-verzoek krijgen met behulp van axios.
Hopelijk helpt dit!
Antwoord 5
Dit werkt voor mij:
in javascript :
Axios({
method: 'post',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
url: 'https://localhost:44346/Order/Order/GiveOrder',
data: order
}).then(function (response) {
console.log(response.data);
});
en in de backend (.net core):
bij opstarten:
#region Allow-Orgin
services.AddCors(c =>
{
c.AddPolicy("AllowOrigin", options => options.AllowAnyOrigin());
});
#endregion
en in controller voor actie
[EnableCors("AllowOrigin")]
Antwoord 6
Ik vermeld alleen mijn oplossing voor iemand die hier zou kunnen komen door te googlen. Ik heb mijn CORS-probleem opgelost (bij het aanroepen van een externe API vanuit mijn gebruikersinterface in de browser) door withCredentialsin te stellen op falsein mijn axios-aanroep:
axios({
method: 'get',
url: `https://api.someurl.com/subject/v2/resource/somevalue`,
withCredentials: false,
params: {
access_token: SECRET_TOKEN,
},
});
In dit geval is de beveiliging van het externe api-eindpunt gebaseerd op het access_token.
Antwoord 7
CORS-probleem is iets dat u alleen op een Broswer tegenkomt. Het gebeurt omdat de server geen verzoeken van andere servers toestaat
dwz als ik een verzoek stuur van http://localhost:3000 naar een api(http://example.com /users) om de gebruikersgegevens hier op te halen.
Als de server uw lokale host niet herkent
@CrossOrigin(Origin = “*”) // dit zal elk verzoek van elke server toestaan waar u geen CORS-probleem tegenkomt als u deze annotatie gebruikt
Wat nu als u een verzoek verzendt met behulp van axios in reactie op een andere server die u niet in de hand hebt, de manier om dat probleem op te lossen is door http-proxy-middleware te gebruiken
npm i http-proxy-middleware // installeer deze afhankelijkheid
axios.{
methode: ‘post’,
url: ‘/eindpunt’,
koppen: {
‘Inhoudstype’: ‘toepassing/json’,
},
proxy: createProxyMiddleware({
doel: ‘https://www.api.com’,
changeOrigin: true}),
gegevens: gegevens
};
Op deze manier wordt nu een proxyverzoek naar www.api.com/endpointverzonden en u ontvangt dus geen cors-probleem
voeg dit ook toe aan uw package.json
“proxy”: “https://www.api.com”
Antwoord 8
Probeer dit.. het werkte voor mij
axios.get(`http://localhost:4000/api`,{ crossdomain: true }).then((result)=>{
console.log("result",result);
}).catch((error)=>{
console.log("Error",error);
});
Antwoord 9
Voeg dit gewoon toe aan uw headers
headers : {
'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8'
}
Het is niet nodig om Access-Control-Allow-Origin : *
Antwoord 10
CORS-probleem kan eenvoudig worden opgelost door dit te volgen:
Maak een nieuwe snelkoppeling van Google Chrome (update het browserinstallatiepad dienovereenkomstig) met de volgende waarde:
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="D:\chrome\temp"