Object is not a function

坑一、是不是函数重名的问题

如图报了一个这样的错，百度好多都说是函数名和html元素重名的问题。可是这个问题我想我这里是不存在的

可以看到就一个绑定事件，而且id名不是关键字

报错是在$.ajax这一行，索性就把submit-info改了吧，但是还是没有用。

坑二、是不是跨域的问题

看错误 6处错误，有5行是jQuery.js的错误，有一处是涉及到我自己写的js错误

问题就在这了：at HTMLButtonElement.<anonymous>

也就是canvas加载服务器图片，没有允许跨域造成的。

关于跨域，百度的解决方案有很多。

首先普及一下知识。CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功

能，IE浏览器不能低于IE10。

它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来

说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有

感觉。因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

请求流程

1、preflight request发送请求

2、preflight Response返回一些信息，验证是否允许跨域，接而执行步骤3和4

这里是被请求的服务器后端允许请求端请求资源，才能实现跨域。

因此，我们需要在被请求的服务器端方法内允许对方请求，加入如下代码

response.setHeader("Access-Control-Allow-Origin", "http://localhost:9105");

response.setHeader("Access-Control-Allow-Credentials", "true");

如果是SpringMVC4.2及以上的版本，则可以直接使用注解

@CrossOrigin(origins="http://localhost:9105",allowCredentials="true")

这个注解 allowCredentials="true" 默认为true，所以可以不写。

可以看到这两句代码主要是给请求方set一个header

Access-Control-Allow-Origin 设置被允许请求的源，如果是允许所有源请求，设置为 *

Access-Control-Allow-Credentials 设置是否允许发送cookie

Access-Control-Allow-Origin是HTML5中定义的一种解决资源跨域的策略。

他是通过服务器端返回带有Access-Control-Allow-Origin标识的Response header，用来解决资源的跨域权限问题。

CORS请求默认不发送Cookie和HTTP认证信息。如果要把Cookie发到服务器，一方面要服务器同意，指定Access-Control-Allow-Credentials字段。另一方面，开发者必须在AJAX请求中打开

withCredentials属性。否则，即使服务器同意发送Cookie，浏览器也不会发送。或者，服务器要求设置Cookie，浏览器也不会处理。

'withCredentials':true

坑三、后端解决同源

可以吗？然并卵。其实到这里，我的问题自己也清楚了。因为我用的是独立的文件服务器fastDFS存储图片，那么我的前端是通过代理访问了图片服务器。如果要加CrossOrigin，那么需要在tracker

设置。显然不可能。所以我的解决方案是在后台把图片转成base64格式传递给前端，这样就达到了同源。java代码如下：

import sun.misc.BASE64Encoder;

import java.io.*;

import java.net.HttpURLConnection;

import java.net.URL;

/**

 * 将文件服务器图片编码为Base64

 * @param url

 * @return

 * @throws Exception

 */

public static String encodeImageToBase64(URL url) throws Exception {

    //将图片文件转化为字节数组字符串，并对其进行Base64编码处理

    System.out.println("图片的路径为:" + url.toString());

     //打开链接

    HttpURLConnection conn = null;

    try {

        conn = (HttpURLConnection) url.openConnection();

        //设置请求方式为"GET"

        conn.setRequestMethod("GET");

        //超时响应时间为5秒

        conn.setConnectTimeout(5 * 1000);

        //通过输入流获取图片数据

        InputStream inStream = conn.getInputStream();

         //得到图片的二进制数据，以二进制封装得到数据，具有通用性

        ByteArrayOutputStream outStream = new ByteArrayOutputStream();

        //创建一个Buffer字符串

        byte[] buffer = new byte[1024];

        //每次读取的字符串长度，如果为-1，代表全部读取完毕

        int len = 0;

        //使用一个输入流从buffer里把数据读取出来

        while ((len = inStream.read(buffer)) != -1) {

        //用输出流往buffer里写入数据，中间参数代表从哪个位置开始读，len代表读取的长度

            outStream.write(buffer, 0, len);

        }

         //关闭输入流

        inStream.close();

        byte[] data = outStream.toByteArray();

        //对字节数组Base64编码

        BASE64Encoder encoder = new BASE64Encoder();

        String base64 = encoder.encode(data);

        System.out.println("网络文件[{}]编码成base64字符串:[{}]"+url.toString()+base64);

        return base64;//返回Base64编码过的字节数组字符串

    } catch (IOException e) {

        e.printStackTrace();

        throw new Exception("图片读取失败,请联系客服!");

    }

}

什么前端图片加载不出来，what？这个base64是纯字符串，请给它加上22位前缀data:image/png;base64,

img.src="data:image/png;base64,"+base64;


坑四、js版本的问题

然而问题还在继续，但是这次有进展能向后台发送请求了，只是ajax请求的data参数是Object

最后问题找到在ajax传递的参数中用了关键字  length和width,但是奇怪的是上一个页面用的相同的方法就行，这个页面就不行了。
上个页面只是多了个form表单，好吧闲话不多说。在html中把关键字改名，ajax提交成功了，进了后台。

但是问题又来了，后台接收不到数据，走了很多弯路。解决办法是把jquery-3.3.1.min.js换成jquery-1.8.3.min.js

搞定

真是一波三折啊，程序猿一般人真干不了！