No 'Access-Control-Allow-Origin' header is present on the url created by CloudStorageTools::createUploadUrl

Question

I am sending an Ajax Request to upload a profile photo to my Google App Engine instance

According to https://cloud.google.com/appengine/docs/php/googlestorage/user_upload#createuploadurl_options

I need to create a url where i need to send the image.

$('.image-form').change(function() {
  var data = new FormData();
  data.append('uploaded_files', $('.image-form').prop('files')[0]);
  $.ajax({
    type: "GET",
    url: "https://example.appspot.com/v1/upload/url",
    success: function(response){
        var url = response.url;
        $.ajax({
          type: "POST",
          url: url,
          processData: false,
          contentType: false,
          data: data,
          success: function(response){
              console.log(response);
          }
        });
    }
  });

I get the error

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'local.app' is therefore not allowed access. The response had HTTP status code 503.

I have set the CORS on the Cloud Storage as given here https://cloud.google.com/storage/docs/cross-origin#Configuring-CORS-on-a-Bucket

Any kind of help will be truly appreciated.

Dmitry Kaigorodov Dmitry Kaigorodov · Accepted Answer · 2016-02-05T12:29:11

Here is java (sorry) snippet from my Kuoll remote debugger for web apps.

package com.kuoll.server.filters;

import javax.servlet.*;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class CrossOriginFilter implements Filter {

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse resp = (HttpServletResponse) response;

        resp.addHeader("Access-Control-Allow-Origin", "*");
        resp.setHeader("Access-Control-Allow-Methods", "POST, OPTIONS");
        resp.setHeader("Access-Control-Allow-Headers", "origin, content-type, accept");

        chain.doFilter(request, response);
    }

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
    }

    @Override
    public void destroy() {
    }

}

Replace * in resp.addHeader("Access-Control-Allow-Origin", "*"); to your Origin (if needed).

web.xml

<filter-mapping>
    <filter-name>CrossOriginFilter</filter-name>
    <url-pattern>/api/*</url-pattern>
</filter-mapping>

No 'Access-Control-Allow-Origin' header is present on the url created by CloudStorageTools::createUploadUrl

1 Answers