No 'Access-Control-Allow-Origin' header is present on the requested resource with API and website on same port

Question

I have my site and my api hosted on the same port on server (:80). I would like to send a request from a view of my website to my api.

this is my request : ( i runned it in componentWillMount with reactJS)

axios.request({
         url: ROOT_URL + '/user/comfirmation/' + tmp[1],
         method: 'get',
         data: null,
         headers: {
             'Content-Type': 'application/json'
         }
     })
     .then((response) => {

         if (response.data.Type == "EmailUpdated") {
             this.setState({
                 actualState: 'success',
                 type: response.data.Type,
                 email: response.data.Email
             })
         } else {
             this.setState({
                 actualState: 'success',
                 type: response.data.Type
             })
         }

     }).catch((error) => {
             this.setState({
                 actualState: 'error'
             })
     })

it works perfectly in local but when my website is deployed i get this error :

but method is allowed :

I've tried with fetch i havent this bug but I really want to solve this problem with axios because I prefer its implementation. Can someone help me?

Answer 1

spottedways.com and www.spottedways.com are not the same origin. One has a www. on the front. The complete hostname has to match, not just the second level domain.

• Stop using absolute URLs. Use relative URLs.
• Pick one of your two hostnames (www or no-www) to be the canonical one. Set up the other hostname to issue 301 redirects to the canonical one.