has been blocked by CORS policy

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Laravel / PHP developer

Functie omschrijving Wij zijn op zoek naar een Medior PHP / Laravel Developer voor een IT-consultancy in de omgeving van Hoofddorp! Ben jij op zoek naar een leuke nieuwe uitdaging binnen een veelzijdige werkomgeving? Lees dan snel verder! Binnen dit bedrijf werk je in een ontwikkelteam, waarin je zeer betrokken bent en meedenkt over softwareoplossingen. Binnen dit Team hou je je bezig met het aanpassen, verbeteren en vernieuwen van de logistieke oplossingen. Je zult je bezig houden met de volgende werkzaamheden: Je gaat aan de hand van de wensen van klanten software ontwikkelen; Je bent bij het gehele proces betrokken;

Bekijk vacature »

Senior Full Stack developer

Bedrijfsomschrijving tbd Functieomschrijving Full Stack Java Development bij Randstad Groep Nederland (HQ) Er is een vacature in het Corporate Client Solutions (CCS) team. Dit team is met een ander team net begonnen aan het project ‘Grip op Inhuur’. Het doel van dit project is de tevredenheid van onze leveranciers te verhogen en de efficiëntie van onze administratie te verbeteren. Onderdeel daarvan is een ‘Mijn-omgeving’ voor ZZP’ers en leveranciers. Naast dit nieuwe project werkt het team ook aan het onderhoud en verbeteren van een digitaal vacature management systeem waarmee dagelijks vele vacatures worden voorzien. Het team ontwikkelt zo veel mogelijk zelf

Bekijk vacature »

Front-end developer - working on software for arou

Functie They have recently started looking for an experienced Front-end (mobile/app) developer. Because of the short lines within the team, they are also looking for someone who can communicate with the service desk, sales and support for technical questions. You will join their IT team consisting of about 10 colleagues divided over two teams in rooms opposite each other. Half of these are involved in their front-end. You will work together with, among others, the Architect, 1 senior, 1 junior and there is a Team Leader. In terms of technology, they work with a unique tech-stack, particularly because of the

Bekijk vacature »

React developer Inhouse cloudplatform

Functie De functie: Als front-end developer kom je te werken naast 2 andere front-end/React developers, waaronder één senior. Een hele mooie kans dus om in korte tijd veel nieuwe kennis en ervaring op te doen. Ze hebben momenteel veel werk hierin en daarom willen ze het team graag uitbreiden. Het is van belang dat je, zeker gezien het vele thuiswerken, in ieder geval al een aantal projecten hebt gedaan in React. Taken waar je aan kunt denken zijn het ontwikkelen van client-applicaties o.b.v. HTML5, React en andere open standaarden. Ook ben je nauw betrokken bij het implementeren van designs o.b.v.

Bekijk vacature »

Traineeship Full Stack Java developer

Dit ga je doen Start jij op 7 augustus bij de Experis Academy dan kickstart jij jouw IT-carrière! We leiden je op tot een gewilde Full Stack Java Developer met alle kennis en vaardigheden die nodig zijn om de arbeidsmarkt te betreden. Wat kun je verwachten, hoe zit een dag in het leven van een Trainee eruit? Periode 1 Als Full Stack Java Developer Trainee volg je vanuit huis een op maat gemaakte onlinetraining die in het Engels wordt gegeven. De tijd die je kwijt bent aan het volgen van de training kun je vergelijken met een fulltime werkweek. In

Bekijk vacature »

Front-end developer (medior/senior)

Functie Het team bestaat uit een architect, fullstack developers, app developers, de product owner en projectmanager. Eenieder draagt vanuit zijn discipline bij aan een complete oplossing voor de klant. Uiteraard zul je hierin nauw samenwerken met je collega’s. Jij wordt verantwoordelijk voor de front-end implementatie en fungeert als lead op dit gebied binnen het team. Je kunt helder formuleren, ideeën uitdragen en overbrengen aan je collega’s. Qua technische stack is het vooral van belang dat je ervaren bent met Angular, HTML5, CSS en TypeScript. Verder is ervaring in NgRx, Bootstrap, BEM en Cypress een pré, evenals affiniteit met UX/UI Design!

Bekijk vacature »

Traineeship Java Developer

Functie Wat ga je doen als Java Developer? Jij start via ons bij deze opdrachtgever als Trainee Java ontwikkelaar, tijdens het traineeship ga je in 1 jaar van de basis naar professioneel Java ontwikkelaar. Je start samen met een groep trainees, volgt de aangeboden cursussen en gaat aan de slag bij één van onze opdrachtgevers. Na een aantal maanden volgt de volgende opdracht. Door de groei in jouw rol kom je op steeds complexere opdrachten terecht. Veel afwisseling dus. Collega’s met ervaring helpen je bij deze groei en samen met jouw coach ga je een persoonlijke leerplan opzetten om jou

Bekijk vacature »

Back end developer PHP

Functie Heb jij altijd al eens bij een bedrijf willen werken waar jij géén nummertje bent, die alleen maar uitvoerend werk doet? Dan zou je hier perfect passen! Tuurlijk, je werkt aan projecten voor grote of kleine bedrijven… Het enige verschil hier is, jouw mening telt hier écht. Jouw inbreng wordt gewaardeerd, serieus genomen en gebruikt. En vergeet niet, je werkt niet alleen aan deze projecten. Er werken in totaal ruim 25 developers en designers, onderverdeeld over 3 development teams. Voornamelijk bestaande uit Medior en Senior developers, die samen voor een inspirerende en ambitieuze omgeving zorgen. Hun visie is namelijk

Bekijk vacature »

Full stack .NET developer Microsoft 365

Wat ga je doen als Full stack .NET developer Microsoft 365? Je stelt je op als sparringpartner voor het team en PO over toekomstige functionaliteiten, architectuur en mogelijke nieuwe producten. Je bent mede-verantwoordelijk voor het vertalen en omzetten van een user story in een passend technisch design. Je implementeert functionaliteiten op basis van een technisch design en user story. Je bent mede-verantwoordelijk voor het beheer van Azure DevOps, waaronder het beheer van GIT, Build Pipelines, Release Pipelines en geautomatiseerde testen. Hier herken jij jezelf in Hbo werk- en denkniveau of hoger aangevuld met relevante certificeringen en/of cursussen; Minimaal 3 jaar

Bekijk vacature »

Low Code Developer voor o.a. overheidsprojecten!

Bedrijfsomschrijving Wil jij ook behoren tot de specialist in Low Code? Dan zou ik zeker aanraden om verder te lezen. Deze organisatie is ooit opgericht door twee studenten en is inmiddels uitgegroeid tot een serieuze werkgever met een groot aanzien op Low Code projecten. De sfeer is echter niet veranderd, er heerst een informele sfeer met een open deuren beleid, en hierin mag de eigen bar natuurlijk niet ontbreken. Momenteel maakt deze organisatie een flinke groei door en hier kan jij natuurlijk niet bij ontbreken. Daarom ben ik op zoek naar Low Code Developers met een degelijke technische achtergrond. Kennis

Bekijk vacature »

Junior Software Developer (HBO / WO)

Functie omschrijving Voor een leuke opdrachtgever zijn wij op zoek naar een Junior Software Developer! Sta jij aan het begin van je carrière en heb je net je HBO of WO-diploma in de richting van ICT of Techniek mogen ontvangen? En heb jij grote affiniteit met software development? Dan hebben wij bij Jelling IT Professionals de perfecte opdrachtgever in de omgeving van Hoofddorp. Binnen deze functie vervul je een onsite learning programma waarbij je aan de slag gaat met PHP en Laravel. Hierbij ben je voornamelijk werkzaam op verschillende klantlocaties en is het jouw taak om hun wensen en eisen

Bekijk vacature »

Software Developer

Functie omschrijving Heb jij affiniteit met ICT en een WO diploma in de pocket? Dan ben je hier aan het juiste adres. Voor een opdrachtgever in Amsterdam zijn wij op zoek naar kandidaten die (enige) ervaring hebben met Java, Javascript, C of C++. Je zal door middel van trainingen worden opgeleid tot een volwaardige Software Developer. Er wordt tijdens de training natuurlijk veel aandacht besteedt aan de vaktechnische aspecten, maar er gaat ook veel aandacht uit naar jouw persoonlijke ontwikkeling. Bedrijfsprofiel Bij deze opdrachtgever in de omgeving van Amsterdam zoeken ze meerdere enthousiaste kandidaten die hun carrière willen starten met

Bekijk vacature »

Software Programmeur PHP

Functie Ben jij op zoek naar een nieuwe uitdaging als PHP developer en zoek je een leuke platte organisatie? Lees dan snel verder! Voor een opdrachtgever in omgeving Capelle aan den IJssel dat zich gespecialiseerd heeft in het realiseren van veilige netwerkverbindingen zijn wij op zoek naar een leuke software developer ter versterking van het huidige team. Hoe kan jouw dag er straks uitzien? Je gaat software en webapplicaties ontwikkelen met behulp van de talen PHP, JAVA en Node.js. Je gaat technische klussen uitvoeren op locatie bij klanten. Je onderhoudt contact met de projectleider om er zeker van te zijn

Bekijk vacature »

PHP Developer - Draag bij aan de maatschappij!

Bedrijfsomschrijving Wil jij als applicatieontwikkelaar deel uitmaken van een gedreven ontwikkelteam en werken aan innovatieve producten? Dan hebben wij dé uitdaging voor jou! Wij zijn op zoek naar een enthousiaste collega die samen met ons de technische ondergrond van onze producten verder wil ontwikkelen met behulp van PHP. Met jouw expertise geef je de finishing touch aan onze producten om jezelf steeds opnieuw weer te verrassen. Functieomschrijving Bij ons staan innovatie en creativiteit centraal. Wij zijn op zoek naar een enthousiaste PHP ontwikkelaar die nieuwe ideeën en inzichten kan inbrengen en daarmee zichzelf en het team verder kan laten groeien.

Bekijk vacature »

Junior Java Developer

Dit ga je doen Je ontwikkelt innovatieve, maatschappelijk belangrijke applicaties; Je implementeert nieuwe features; Je gaat in gesprek met eindgebruikers en designers om de applicaties continu te finetunen; Je draait mee in een professionele Agile/Scrum omgeving. Hier ga je werken Onze klant is een internationale organisatie gevestigd in de omgeving van Amsterdam. Ze staan zeer goed bekend in de markt door hun innovatieve dienstverlening op IT gebied en hun gepassioneerde werknemers. Voor hun inspanningen op het gebied van IT hebben ze meerdere prijzen gewonnen! Onze klant is onderdeel van een Corporate werkgever en heeft zelf 300 mensen in dienst. Om

Bekijk vacature »

Pagina: 1 2 volgende »

Werner g

werner g

16/12/2021 15:39:04
Quote Anchor link
Via react native maak ik een app. De inloggegeven sla ik op bij de database van mijn webhosting. Hiervoor heb ik een api in php geschreven en die draait nu ook in productie bij hostnet. Als ik de app test (via google chrome) en de signup gegevens invul krijg ik deze foutmelding. De http heb ik onherkenbaar gemaakt.

Access to fetch at 'http//..........login.php' from origin 'http://localhost:*******' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.

Als lake weet ik niet zo goed wat ik nu moet doen. Na een paar dagen zoeken via google krijg ik zoveel zoekresultaten/vragen/oplossingen dat ik 'door de bomen het bos niet meer zie'. Veel CORS foutmeldingen lijken op elkaar en antwoorden zijn vaak verschillend.

Oplossingen die ik zelf gevonden heb:
- Kan/moet ik CORS policy uitschakelen? volgens mij mag dat niet ivm beveiliging
- Moet ik nog een server in de frontend maken met node.js? Is dit voor mij van toepassing?
- Moet ik een CORS plugin installeren voor google Chrome? (volgens mij los ik het probleem hiermee niet op)
- In de file index.php moet ik het onderstaande zetten met een paar aanpassingen. (ik heb alleen db.php, signup.php en login.php)

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');

Hopelijk kan iemand mij hiermee verder helpen.
 
PHP hulp

PHP hulp

02/03/2024 21:27:23
 
- Ariën  -
Beheerder

- Ariën -

16/12/2021 15:42:47
Quote Anchor link
Als de doelhost jouw host is, dan kan je inderdaar CORS toestaan met de hostname van je Origin.
Zie ook: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Dit kan je ook in .htaccess regelen

De developer-console van je browser kan je prima gebruiken om te kijken welke headers je terugkrijgt gestuurd bij een aanroep.
 
Werner g

werner g

16/12/2021 16:36:01
Quote Anchor link
Ik heb de info in de link doorgelezen maar dat is voor mij nog erg technisch. Hierdoor begrijp ik nog niet helemaal wat je bedoeld. De php scripts heb ik in de map httpdocs staan, ik zie geen .htaccess.

In DEVTOOLS staat ook deze error: "POST" http://.......login.php net::ERR_FAILED
Betekent dit dat ik POST moet toestaan?

Zou ik dan het onderstaande in login.php moeten zetten?

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST');
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');
 
- Ariën  -
Beheerder

- Ariën -

16/12/2021 16:39:52
Quote Anchor link
Als je jan-en-alleman een request wilt laten doen, dan kan je dat proberen.
Gewijzigd op 16/12/2021 16:42:17 door - Ariën -
 
Werner g

werner g

16/12/2021 17:03:14
Quote Anchor link
"Als je jan-en-alleman een request wilt laten doen"

Bedoel je hiermee dat dit ook een oplossing is voor een signin/registratie pagina van een app.
Of wil je hiermee aangeven dat de beveiliging van je database dan zo lek als een mandje is.
 
- Ariën  -
Beheerder

- Ariën -

16/12/2021 17:06:49
Quote Anchor link
Ga zelf eens na of www.randomdomeinvaniemand.nl ook een aanroep mag doen naar je scripts via een AJAX-request.


Verder heeft CORS niks te maken met je database.
Gewijzigd op 16/12/2021 17:07:44 door - Ariën -
 
Werner g

werner g

16/12/2021 17:20:52
Quote Anchor link
De reden dat ik deze vraag stel op dit forum is omdat ik geen kennis heb van php, ajax request, CORS etc. Ik probeer een app te ontwikkelen waarvoor ik een database nodig heb. React-native, Kotlin, java, python talen begrijp ik redelijk maar dit totaal niet.

"Ga zelf eens na of www.randomdomeinvaniemand.nl ook een aanroep mag doen naar je scripts via een AJAX-request."

Lijkt me niet, maar het zegt me ook niks. Zou je me willen helpen om het werkend te krijgen?
 
- Ariën  -
Beheerder

- Ariën -

16/12/2021 17:49:29
Quote Anchor link
Is het niet handig om zelf wat ervaring op te doen? Jij bent ook diegene die de app moet onderhouden en beslissingen moet nemen.

De uitleg over CORS staat al helder beschreven in de link van Mozilla in dit topic. Met Origin kan je bepalen wie een request mag doen.
Gewijzigd op 16/12/2021 18:00:19 door - Ariën -
 
Werner g

werner g

17/12/2021 11:56:18
Quote Anchor link
Dat is inderdaad wel makkelijker. Ik heb de tekst naar het Nederlands vertaalt maar ik blijf nog wel met een aantal vragen zitten. Wanneer iets onder Simple Request valt begrijp ik niet helemaal maar dat heb ik voorlopig ook niet nodig. Klopt het dat ik de https van mijn client/app bij 'Access-Control-Allow-Origin' moet zetten. Moet ik dan een eigen proxy maken met bijv Heroku -> en de https van deze proxy bij 'Access-Control-Allow-Origin' zetten?
'http://localhost:******* lijkt me niet goed als ook andere gebruikers zich willen registeren.

header('Access-Control-Allow-Origin: https://MIJN proxy' ipv *);
header('Access-Control-Allow-Methods: POST);
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');

Dit gaat over de registratie pagina.
Moet ik bij de inlogpagina (login.php) dit erbij zetten?
Access-Control-Allow-Credentials: true
 
Werner g

werner g

20/12/2021 14:32:30
Quote Anchor link
Ik heb geprobeerd:

header("Access-Control-Allow-Origin: http://localhost:19006";);
header("Access-Control-Allow-Origin: http://localhost:19002";);
header("Access-Control-Allow-Origin: http://localhost:21";); poort hostnet
header("Access-Control-Allow-Origin: mijnwebsite.nl/LoginRegister/login.php");

Volgens mij moet ik de poort bij http://localhost:... zetten.
Weet je waar ik die kan vinden? Ik dacht dat het de eerste twee zijn, maar ik krijg steeds dezelfde Cors foutmelding.

Ik heb nu dit:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<?php
include('db.php');

header("Access-Control-Allow-Origin: http://localhost:19006");
header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
header("Access-Control-Allow-Headers: Content-Type, Authorization");
header("Content-Type: application/json");

$UserEmail = $decodedData['Email'];
$UserPW = ($decodedData['Password']); //password is hashed

$SQL = "SELECT * FROM newuser WHERE UserEmail = '$UserEmail'";
$exeSQL = mysqli_query($conn, $SQL);
$checkEmail =  mysqli_num_rows($exeSQL);

if ($checkEmail != 0) {
    $arrayu = mysqli_fetch_array($exeSQL);
    if ($arrayu['UserPw'] != $UserPW) {
        $Message = "pw WRONG";
    }
else {
        $Message = "Success";
    }
}
else {
    $Message = "No account yet";
}


$response[] = array("Message" => $Message);
echo json_encode($response);[/code]


--------------------------------------------------------------------------------


[
code]import React, { Component } from 'react';
import { View, Pressable, Text, TextInput, TouchableOpacity, Button} from 'react-native';
import stylesin from '../../style';
import Feather from 'react-native-vector-icons/Feather';

export default class signin extends Component {
  constructor(props) {
    super(props);
    this.state = {
      email : '',
      password : '',
      check_textInputChange : false,
      secureTextEntry : true,
    };
  }


  InsertRecord=()=>{
    var
Email = this.state.email;
    var
Password = this.state.password;

    if ((Email.length==0) || (Password.length==0)){
      alert("Required Field Is Missing!!!");
    }
else{
      var
APIURL = **"http://mywebsite.nl/login.php"**;

      var
headers = {
        'Accept' : 'application/json',
        'Content-Type' : 'application/json'
      };
            
      var
Data ={
        Email: Email,
        Password: Password
      };

      fetch(APIURL,{
        method: 'POST',
        headers: headers,
        body: JSON.stringify(Data)
      })
      .
then((Response)=>Response.json())
      .
then((Response)=>{
        alert(Response[0].Message)
        if (Response[0].Message == "Success") {
          console.log("true")
          this.props.navigation.navigate("HomeScreen");
        }

        console.log(Data);
      })
      .
catch((error)=>{
        console.error("ERROR FOUND" + error);
      })
    }
  }


  updateSecureTextEntry(){
    this.setState({
      ...
this.state,
      secureTextEntry: !this.state.secureTextEntry
    });
  }


  render() {
    return (
      <
View style={stylesin.viewStyle}>
          <
View style={stylesin.action}>
            <
TextInput
              placeholder="Enter Email"
              placeholderTextColor="#ff0000"
              style={stylesin.textInput}
              onChangeText={email=>this.setState({email})}
              />
          <
/View>

          <
View style={stylesin.action}>
            <
TextInput
              placeholder="Enter Password"
              placeholderTextColor="#ff0000"
              style={stylesin.textInput}
              secureTextEntry={this.state.secureTextEntry ? true : false}
              onChangeText={password=>this.setState({password})}
              />
                <
TouchableOpacity
                  onPress={this.updateSecureTextEntry.bind(this)}>
                  {
this.state.secureTextEntry ?
                  <
Feather
                  name="eye-off"
                  color="grey"
                  size={20}
                  />
                :  
                  <
Feather
                  name="eye"
                  color="black"
                  size={20}
                  />
                }
                <
/TouchableOpacity>  
          <
/View>


                {
/* Button */}

                <
View style={stylesin.loginButtonSection}>    
                  <
Pressable
                    style={stylesin.loginButton}
                    onPress={()=>{
                      this.InsertRecord()
                    }}
                    >
                      <
Text style={stylesin.text}>Sign In</Text>
                  <
/Pressable>
                <
/View>

                <
View style={stylesin.loginButtonSection}>
                  <
Pressable
                    style={stylesin.loginButton}
                    onPress={()=>{
                      // this.InsertRecord()
                    }}
                    >
                      <
Text style={stylesin.text}>Create new Account</Text>
                    <
/Pressable>
                  <
/View>
      <
/View>
    );
  }
}[
/code]
Gewijzigd op 20/12/2021 14:33:38 door werner g
 
- Ariën  -
Beheerder

- Ariën -

20/12/2021 15:11:18
Quote Anchor link
Als een gebruiker via een app direct connectie zoekt, dan moet je normaliter elke host toestaan.

Welke poorten zoek je dan precies? En weet je zeker dat je wel 'localhost' wilt? Of doe je dat vanwege je proxy?

En waarom poort 21 van FTP? Die doet niks met HTTP-requests hoor.
Gewijzigd op 20/12/2021 15:13:55 door - Ariën -
 
Werner g

werner g

21/12/2021 09:51:43
Quote Anchor link
Als een gebruiker via een app direct connectie zoekt, dan moet je normaliter elke host toestaan.

Dat klopt inderdaad, maar dan zou ik moeten kiezen voor:
header("Access-Control-Allow-Origin: *");
Maar dan kan iedereen toegang krijgen tot de database, toch ook buiten de app? Dat is ook niet de bedoeling ivm veiligheid.

Welke poorten zoek je dan precies? En weet je zeker dat je wel 'localhost' wilt? Of doe je dat vanwege je proxy?

Eigenlijk wou ik geen localhost maar dat werd aanbevolen, waarom begrijp ik ook niet echt.


IEn waarom poort 21 van FTP? Die doet niks met HTTP-requests hoor.


Dat had ik hier inderdaad niet moeten zetten, dat was een laatste poging omdat ik er niet meer uitkwam.
 
- Ariën  -
Beheerder

- Ariën -

21/12/2021 09:59:47
Quote Anchor link
CORS heeft niks met databases te maken. Ik neem aan dat je credentials daarvan in je API zitten, en niet in je app?

Ik heb het idee dat je maar een beetje aanrommelt, zonder te weten wat je doet. Dat lijkt mij erg gevaarlijk, los van CORS.

CORS is meer een drempel dan een echte beveiliging. Je kan er mee bepalen welke externe sites jouw scripts mogen aanroepen. Als iemand het los via bijv. wget of cURL aanroept, dan kan dat gewoon.
Gewijzigd op 21/12/2021 10:06:31 door - Ariën -
 
Werner g

werner g

21/12/2021 10:02:08
Quote Anchor link
De credentials zitten inderdaad in mijn api en niet in mijn app.

De reden dat ik het vraag is dat ik een goed beveiligde en werkende oplossing zoek.
Los van dit onderwerp heeft het weinig te maken met "erg gevaarlijk", het overige is alleen het schrijven van een app.
Gewijzigd op 21/12/2021 11:02:28 door werner g
 
- Ariën  -
Beheerder

- Ariën -

21/12/2021 10:08:02
Quote Anchor link
Zie mijn edit hierboven.
Dat schept meer duidelijkheid over CORS.

Verder help ik iedereen graag hoor. :-)
Gewijzigd op 21/12/2021 10:12:48 door - Ariën -
 
Werner g

werner g

21/12/2021 13:58:49
Quote Anchor link
Fijn dat je me toch wilt helpen. Ik denk dat ik nu begrijp welke stappen ik moet volgen om het werkend te krijgen. Curl heb ik gedownload, werkt in opdrachtprompt en volg nu de instructies hieronder.


Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
How to avoid the CORS preflight

The code in the question triggers a CORS preflightsince it sends an Authorization header.

https://developer.mozilla.org/docs/Web/HTTP/Access_control_CORS#Preflighted_requests

Even without that, the Content-Type: application/json header will also trigger a preflight.

What preflight means: before the browser tries the POST in the code in the question, it first sends an OPTIONS request to the server, to determine if the server is opting-in to receiving a cross-origin POST that has Authorization and Content-Type: application/json headers.

It works pretty well with a small curl script - I get my data.

To properly test with curl, you must emulate the preflight OPTIONS the browser sends:

curl -i -X OPTIONS -H "Origin: http://127.0.0.1:3000" \
    -H 'Access-Control-Request-Method: POST' \
    -H 'Access-Control-Request-Headers: Content-Type, Authorization' \
    "https://the.sign_in.url"
with https://the.sign_in.url replaced by whatever your actual sign_in URL is.

The response the browser needs from that OPTIONS request must have headers like this:

Access-Control-Allow-Origin:  http://127.0.0.1:3000
Access-Control-Allow-Methods: POST
Access-Control-Allow-Headers: Content-Type, Authorization
If the OPTIONS response doesnt include those headers, the browser will stop right there and never attempt to send the POST request. Also, the HTTP status code for the response must be a 2xxtypically 200 or 204. If its any other status code, the browser will stop right there.

The server in the question responds to the OPTIONS request with a 501 status code, which apparently means its trying to indicate it doesnt implement support for OPTIONS requests. Other servers typically respond with a 405 Method not allowed status code in this case.

So youll never be able to make POST requests directly to that server from your frontend JavaScript code if the server responds to that OPTIONS request with a 405 or 501 or anything other than a 200 or 204 or if doesnt respond with those necessary response headers.

The way to avoid triggering a preflight for the case in the question would be:

if the server didnt require an Authorization request header but instead, e.g., relied on authentication data embedded in the body of the POST request or as a query param
if the server didnt require the POST body to have a Content-Type: application/json media type but instead accepted the POST body as application/x-www-form-urlencoded with a parameter named json (or whatever) whose value is the JSON data
Gewijzigd op 23/12/2021 11:55:15 door werner g
 
Werner g

werner g

23/12/2021 11:54:36
Quote Anchor link
De curl in chrome is:
curl "http://gastgarant.nl/LoginRegister/login.php" ^
-X "OPTIONS" ^
-H "Connection: keep-alive" ^
-H "Accept: */*" ^
-H "Access-Control-Request-Method: POST" ^
-H "Access-Control-Request-Headers: content-type" ^
-H "Origin: http://localhost:19006"; ^

In mijn login.php heb ik dit staan:
header("Access-Control-Allow-Origin: http://localhost:19006";);
header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
header("Access-Control-Allow-Headers: Content-Type, Authorization");
header("Content-Type: application/json");

Zou ik dan het onderstaande aan moeten passen?
header("Access-Control-Allow-Origin: http://localhost:19006";);
header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
header("Access-Control-Allow-Headers: Content-Type, Authorization");
header("Content-Type: application/json");

En dit
application/x-www-form-urlencoded with a parameter named json (or whatever) verwerken in mijn signin.js script?
Gewijzigd op 23/12/2021 12:12:23 door werner g
 
- Ariën  -
Beheerder

- Ariën -

23/12/2021 13:05:58
Quote Anchor link
Maar met welke reden sta je alleen localhost toe? Zit je achter een proxy?
 
Werner g

werner g

23/12/2021 13:36:32
Quote Anchor link
Nee ik werk vanaf thuis met een laptop. Maar eerder vroeg ik of dit juist was:
header('Access-Control-Allow-Origin: *');

jou reactie: Als je jan-en-alleman een request wilt laten doen, dan kan je dat proberen.
mijn reactie: Bedoel je hiermee dat dit ook een oplossing is voor een signin/registratie pagina van een app. Of wil je hiermee aangeven dat de beveiliging van je database dan zo lek als een mandje is.
jou reactie: Ga zelf eens na of www.randomdomeinvaniemand.nl ook een aanroep mag doen naar je scripts via een AJAX-request.
etc.....

Ik ga ervan uit dat * sowieso niet goed is omdat dan iedereen toegang heeft.
Moet ik dan een Loopback-adres + 19006 gebruiken? Maar dat is toch hetzelfde als localhost?
 
- Ariën  -
Beheerder

- Ariën -

23/12/2021 14:26:32
Quote Anchor link
Gaat het om een app? Die maakt requests van verschillende hostnames.

Of gaat het om een site? Die draait op één hostname.

Verder is CORS een drempel, en geen waterdichte beveiliging. Als de beveiliging in je script die extern aangeroepen wordt goed beveiligd is, dan is het toch ook prima? Zelf zou ik het in sommige gevallen ongewenst vinden als een API-request met data door een externe site uitgelezen wordt. Die afweging moet je zelf maken.
Gewijzigd op 23/12/2021 14:33:22 door - Ariën -
 
Werner g

werner g

23/12/2021 14:42:54
Quote Anchor link
Het gaat inderdaad om een app. Zou je de voorgaande berichten ook willen lezen en aan willen geven wat ik precies moet doen. Stap voor stap. Ik ben loop hier nu al ruim 2 weken op vast en ik kom niks verder.
 

Pagina: 1 2 volgende »



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.