CODEWITHSUNDEEP
node.jsvue.jsxmlhttprequest
Omar VR
Omar VR

Reputation: 19

No 'Access-Control-Allow-Origin'

I face this problem:

XMLHttpRequest cannot load http://localhost:8000/scripts/advaced_donwload/advancedUpload/vueupload/store.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

This is my code: 

storeMeta(file) {
    var fileObject = this.generateFileObject(file)
    return new Promise((resolve, reject) => {
      this.$http.post('http://localhost:8888/vueupload/store.php', {
        name: file.name
      }).then((response) => {
        fileObject.id = response.body.data.id
        resolve(fileObject)
      }, () => {
        reject(fileObject)
      })
    })
  }

Upvotes: 1

Views: 945

Answers (1)

Bamieh
Bamieh

Reputation: 10906

your php server must allow http://localhost:8080 to POST resources. this is done in the server configuration.

  1. You can either completely disable the CORS on the server, enabling all sources to communicate with your server.

  2. Or you can add this header for the server:

    Access-Control-Allow-Origin: http://localhost:8080

  3. Or just allow everything

    Access-Control-Allow-Origin: *

To do it in on a PHP server, it might be something simple like this:

 <?php
 header("Access-Control-Allow-Origin: *");

if you are using a framework such as laravel or such, check their documentation in the CORS sections

Upvotes: 1

Related Questions