JavaScript Notes

零基础入门建议

收集自网上，自己也在实践中，这个看着比较靠谱：

  1. 菜鸟教程JavaScript/w3cschool JavaScript二选一 (纯零基础可能需要，有基础的可以从2或3开始)
  2. 廖雪峰JavaScript教程
  3. JavaScript高级程序设计（目前最新第4版）
  4. 菜鸟教程jQuery
  5. 《你不知道的JavaScript》+《深入理解JavaScript》

注意：《JavaScript权威指南》（一般简称“犀牛书”），并不适合入门学习。

ref: https://www.zhihu.com/question/23078046/answer/203531074

小技巧

不能操作的页面，想要编辑时的小技巧：打开console，输入如下内容

document.body.contentEditable = true

前后端联调注意点

设置Access-Control-Expose-Headers

header["Access-Control-Expose-Headers"]="Content-Disposition"

Access-Control-Expose-Headers 是一个CORS（跨源资源共享）响应头，用于指示浏览器在跨源请求中将响应中的指定响应头暴露给前端 JavaScript 代码。具体作用如下：

  1. 暴露自定义响应头：默认情况下，浏览器只会将一组默认的响应头（如Cache-Control、Content-Language、Content-Type、Expires、Last-Modified等）暴露给前端 JavaScript 代码。这是出于安全性和隐私的考虑，以防止前端代码访问一些敏感信息。如果后端返回自定义响应头（如Content-Disposition），浏览器默认情况下不会将它们暴露给前端 JavaScript。

  2. 前端需要访问自定义响应头：在某些情况下，前端可能需要访问自定义响应头，例如，获取文件下载时的文件名 (Content-Disposition 头中的信息)。在这种情况下，需要后端设置 Access-Control-Expose-Headers 响应头，并列出前端需要访问的自定义响应头名称。

  3. 允许前端访问特定响应头：通过在 Access-Control-Expose-Headers 中列出需要暴露的自定义响应头名称，后端可以明确允许前端访问这些信息，而其他未列出的自定义响应头则仍然受到浏览器的保护。

在前端的场景中，如果您需要访问自定义响应头信息（例如，从响应中获取文件名以便进行文件下载），并且需要跨源请求，您应该要求后端设置 Access-Control-Expose-Headers 响应头并包含需要访问的自定义响应头名称（例如，Content-Disposition）。

设置Content-Disposition

指定响应头，告诉浏览器下载文件，并指定文件名为test.7z
from flask import Flask, Response
headers = {
    'Content-Type': 'application/x-7z-compressed',
    'Content-Disposition': 'attachment; filename="test.7z"',
    'Access-Control-Expose-Headers': 'Content-Disposition',
}

response = Response(file_data, headers=headers)
return response

在上述示例中：

  1. 设置了Content-Type为application/x-7z-compressed，这是7z文件的MIME类型。

  2. 使用Content-Disposition头指定了attachment，表示要以附件方式下载文件，以及filename参数，用于指定用户下载时看到的文件名（这里将其设置为"test.7z"，可以根据实际情况更改文件名）。

  3. 使用Flask的Response对象构建响应，将7z文件的二进制数据写入响应体，并传递上述设置的响应头。

通过这种方式，您可以生成包含7z文件的自定义响应，并且浏览器将按照设置的Content-Disposition头将文件提供给用户下载。请确保替换示例中的seven_zip_data为您的实际7z文件二进制数据。