SteamAPI

[Christopher Roberts]

hi guys we are trying to get our users stats from the steamWeb api using ajax
I am having difficulty getting the script to work as with CORS cross domain.

  <script type="text/javascript">
        $.ajax({
            url: "http://api.steampowered.com/ISteamUser/GetFriendList/v0001/?key=xxxxxxxxxxxxxxxxxxxx&steamid=76561197960435530&relationship=friend",
            dataType: "json",
            success: function(data){
                console.log(data);
            },
			 headers: {"Access-Control-Allow-Origin":"*"},
            error: function(req,text,error){
                console.log(text);
                console.log(error);
                console.log("DIDN'T WORK!")
            }
        });
    </script>

Using the log on Chrome i can see this error

XMLHttpRequest cannot load http://api.steampowered.com/ISteamUser/GetFriendList/v0001/?key=31xxxxxxxxxx0&steamid=76561197960435530&relationship=friend. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://evo4ever.me' is therefore not allowed access. The response had HTTP status code 500.

we have added

<filter>
 <filter-name>CorsFilter</filter-name>
 <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
 <init-param>
   <param-name>cors.allowed.origins</param-name>
   <param-value></param-value>
 </init-param>
 <init-param>
   <param-name>cors.allowed.methods</param-name>
   <param-value>GET,POST,PUT</param-value>
 </init-param>
 <init-param>
   <param-name>cors.allowed.headers</param-name>
   <param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
 </init-param>
 <init-param>
   <param-name>cors.exposed.headers</param-name>
   <param-value></param-value>
 </init-param>
 <init-param>
   <param-name>cors.support.credentials</param-name>
   <param-value>true</param-value>
 </init-param>
 <init-param>
   <param-name>cors.preflight.maxage</param-name>
   <param-value>180</param-value>
 </init-param>
</filter>
<filter-mapping>
 <filter-name>CorsFilter</filter-name>
 <url-pattern>/*</url-pattern>
</filter-mapping>

to the webXML but we still seem to not be allowed to do this.

Burning my head out i think the way the headers are done is the issue but i dont seem to be able to figure it out any help would be much appreciated.

[Rob Spoor]

Welcome to the Ranch!

Christopher Roberts wrote:<filter>  <filter-name>CorsFilter</filter-name>  <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>  <init-param>    <param-name>cors.allowed.origins</param-name>    <param-value></param-value>  </init-param>

Your allowed origins list is empty, and therefore http://evo4ever.me is not allowed. Try adding it to that list.

[Christopher Roberts]

Hi m8 thanks for the responce. I have hadded http://evo4ever.me to the filter buts same issue. I would like to show you the full code incase we are doing the headers wrong.
so we are trying to send a users video to our file server as our web server is on a much slower connection and has smaller disk space.
The idear being they can upload and it be sent straight to remote server.

Servlet for userVideoUpload

package evo.net;

import java.io.*;
import java.util.*;

import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
 

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.commons.io.output.*;

@WebServlet("/Servlet/userVideoUpload")
public class userVideoUpload extends HttpServlet {
	
	private static final long serialVersionUID = 1L;
	
	private boolean isMultipart;
	private int maxFileSize = 2147483500; // (2.14GB) this is the max limit, hopefully it will be enough.
	private int maxMemSize = 4 * 1024;
	private File file;
	private String redirect;
	private String filePath;

   public userVideoUpload() {
   }
	
	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		if(("http://evo4ever.me").equals(request.getHeader("origin"))) {
			
			response.setHeader("Access-Control-Allow-Origin", request.getHeader("origin"));
			response.setHeader("Access-Control-Allow-Headers", "Authorization");
		}
		
		super.service(request, response);
	}
   
   protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	   
	   this.redirect = request.getHeader("referer");
	   this.filePath = "/usr/share/tomcat/webapps/ROOT/testvideo";
	   
	   isMultipart = ServletFileUpload.isMultipartContent(request);
	  
	   DiskFileItemFactory factory = new DiskFileItemFactory();
	   //factory.setSizeThreshold(maxMemSize);
	   factory.setRepository(new File(filePath));
	   ServletFileUpload upload = new ServletFileUpload(factory);
	   //upload.setSizeMax(maxFileSize);

	   Map<String, String> formData = new HashMap<String, String>();
      
	   try { 

		   List fileItems = upload.parseRequest(request);
		   Iterator i = fileItems.iterator();

		   while(i.hasNext()) {
				
			   FileItem fi = (FileItem)i.next();
         
			   if(fi.isFormField()) {
					
				   formData.put(fi.getFieldName(), fi.getString());
					
			   	   }
         		   else if(!fi.isFormField()) {

					   String fieldName = fi.getFieldName();
					   String fileName = fi.getName();
					   String contentType = fi.getContentType();
					   boolean isInMemory = fi.isInMemory();
					   long sizeInBytes = fi.getSize();

					   if(fileName.lastIndexOf("\\") >= 0){
							
						   file = new File(filePath+fileName.substring(fileName.lastIndexOf("\\")));
					   }
					   else {
					
						   file = new File(filePath+fileName.substring(fileName.lastIndexOf("\\")+1));
					   }
			
					   fi.write(file);
					   response.sendRedirect(this.redirect+"&msg_code=extmsguvr");
				   }
		   	}  			
	   	}
   		catch(Exception ex) {

			response.sendRedirect(this.redirect+"&msg_code="+ex.getMessage());
   		}
   }
}

This being hosted on the remote server.
Then we have our upload page.

<%@ page isELIgnored="false"  contentType="text/html; charset=utf-8" language="java" errorPage=""  %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="nwg" value="${requestScope.nwg}" />
<c:set var="message" value="${requestScope.message}" />
<c:set var="dirs" value="${nwg.getDirNames('downloads')}" />
<c:set var="files" value="${nwg.getFileNames('downloads')}" />
<c:set var="cat"  value="${param.cat}" />
<c:set var="action"  value="${param.action}" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
	
	progress {
  display: block; /* default: inline-block */
  width: 300px;
  margin: 2em auto;
  padding: 4px;
  border: 0 none;
  background: #191818;
  border-radius: 14px;
  box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
}
progress::-moz-progress-bar {
  border-radius: 12px;
  background: #FFF;
  box-shadow: inset 0 -2px 4px rgba(0,0,0,0.4), 0 2px 5px 0px rgba(0,0,0,0.3);
  
}
/* webkit */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  progress {
    height: 25px;
  }
}
progress::-webkit-progress-bar {
    background: transparent;
}  
progress::-webkit-progress-value {  
  border-radius: 12px;
  background: #3BAA33;
  box-shadow: inset 0 -2px 4px rgba(0,0,0,0.4), 0 2px 5px 0px rgba(0,0,0,0.3); 
} 
	
	</style>
<script>
function _(el){
    return document.getElementById(el);
}
function uploadFile(){
    var file = _("file1").files[0];

    if(typeof file === "undefined") {

        _("status").innerHTML = "ERROR: Please browse for a file before clicking the upload button";
        _("progressBar").value = 0;
        return;
    }

    $.get('Servlet/Admin/FileUpload?getsize', function(sizelimit) {
       /* if(file.type !== "video/mp4") {
            var typewarn = "ERROR: You have to select a MP4-File";
            _("status").innerHTML = typewarn;
            _("progressBar").value = 0;
            return; ]*/
        
        if(sizelimit < file.size) {
            var sizewarn = "ERROR: The File is too big! The maximum file size is ";
            sizewarn += sizelimit/(10240*10240);
            sizewarn += "MB";
            _("status").innerHTML = sizewarn;
            _("progressBar").value = 0;
            return;
        }
        var formdata = new FormData();
            formdata.append("file1", file);
            formdata.append("size", file.size);
            var ajax = new XMLHttpRequest();
            ajax.upload.addEventListener("progress", progressHandler, false);
            ajax.addEventListener("load", completeHandler, false);
            ajax.addEventListener("error", errorHandler, false);
            ajax.addEventListener("abort", abortHandler, false);
		    ajax.open("POST", "http://149.202.64.134:8080/Servlet/userVideoUpload");
            ajax.send(formdata);
    });
}
function progressHandler(event){
    _("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;
    var percent = (event.loaded / event.total) * 100;
    _("progressBar").value = Math.round(percent);
    _("status").innerHTML = Math.round(percent)+"% uploaded... please wait";
}
function completeHandler(event){
    _("status").innerHTML = "Compleate";
    _("progressBar").value = 0;
}
function errorHandler(event){
    _("status").innerHTML = "Upload Failed";
}
function abortHandler(event){
    _("status").innerHTML = "Upload Aborted";
}
</script>
 

 <form id="upload_form" enctype="multipart/form-data" method="post">
  <input type="file" name="file1" id="file1"><br><br>
  <input type="button" value="Upload File" onclick="uploadFile()">
  <progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
  <h3 id="status"></h3>
  <p id="loaded_n_total"></p>
</form>

and finally our web.xml from the remote server

<servlet>  <servlet-name>servletTest</servlet-name>  <servlet-class>evo.net.servletTest</servlet-class> </servlet> <servlet-mapping>  <servlet-name>servletTest</servlet-name>  <url-pattern>/Servlet/servletTest</url-pattern> </servlet-mapping> <servlet>  <servlet-name>userVideoUpload</servlet-name>  <servlet-class>evo.net.userVideoUpload</servlet-class> </servlet> <servlet-mapping>  <servlet-name>userVideoUpload</servlet-name>  <url-pattern>/Servlet/userVideoUpload</url-pattern> </servlet-mapping>   <filter>    <filter-name>CorsFilter</filter-name>    <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>    <init-param>        <param-name>cors.allowed.origins</param-name>        <param-value>http://evo4ever.me</param-value>    </init-param>    <init-param>        <param-name>cors.allowed.methods</param-name>        <param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>    </init-param>    <init-param>        <param-name>cors.allowed.headers</param-name>        <param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>    </init-param>    <init-param>       <param-name>cors.exposed.headers</param-name>       <param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value>    </init-param>    <init-param>        <param-name>cors.support.credentials</param-name>        <param-value>false</param-value>    </init-param>    <init-param>        <param-name>cors.preflight.maxage</param-name>        <param-value>10</param-value>    </init-param> </filter> <filter-mapping>    <filter-name>CorsFilter</filter-name>    <url-pattern>/*</url-pattern> </filter-mapping>

thanks again for any help you can give us it really should be working

[Rob Spoor]

Christopher Roberts wrote:

	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		if(("http://evo4ever.me").equals(request.getHeader("origin"))) {
			
			response.setHeader("Access-Control-Allow-Origin", request.getHeader("origin"));
			response.setHeader("Access-Control-Allow-Headers", "Authorization");
		}
		
		super.service(request, response);
	}

What is this code supposed to do? Are you aware that that method is executed after the CORS filter has already done its work, and therefore will not have any effect on what the CORS filter does?

Anyway, I suggest setting your debugger to work, and find out what the CORS filter does. In fact, it wouldn't surprise me if the filter isn't even triggered. After all, it's the remote call to api.steampowered.com that fails. Your CORS filter only works on requests to your own site.

[Rob Spoor]

Have you read https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS? I did a quick scan, and it showed me that Access-Control-Allow-Origin should be a response header. You're sending it as a request header though.