用js编写脚本接入DeepSeek API时遇到的问题及解决方案

用js编写脚本接入DeepSeekAPI时遇到的问题及解决方案

本人纯小白，这两天尝试接入DeepSeek API时遇到了一系列问题，谨以此篇作为记录，如有错误还望各位大神指出）

P 1

在DeepSeek给出的API文档中，可以使用openai包接入，在js脚本中写入

import OpenAI from "openai";

后，浏览器报错：

Uncaught SyntaxError: Cannot use import statement outside a module

查询后发现原因是：在浏览器中使用<script>块加载JavaScript文件并使用import，浏览器会默认将它视为普通的脚本文件，而不是模块，这种情况下，浏览器会报错。
“解决方法”：将<script>标签的type设置为module:

<script type="module" src="..."></script>

这样，我们就可以假装解决了这个问题（

P 2

然后，就遇到了第二个报错，

fakeAI.html:1 Access to script at '...' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: chrome, chrome-extension, chrome-untrusted, data, http, https, isolated-app.

好的，成功遇到跨域问题。
之前，我在前端解决跨域问题的简单粗暴的办法就是Win+R在cmd输入

start chrome --disable-web-security --user-data-dir="D:\MyChromeDevUserData"

直接关闭web security然后在打开的chrome浏览器中运行调试。
但这次

Uncaught TypeError: Failed to resolve module specifier "openai".
Relative references must start with either "/", "./", or "../".

嗯，好，还算好懂，那就改成"../node_modules/openai"这下总没问题了，吧？

P 3

嗯

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "".   
Strict MIME type checking is enforced for module scripts per HTML spec.

嗯？
搞了半天，还得用服务器啊…
那么，就用Webpack构建工具来加载模块吧

安装webpack和相关依赖

npm init -y

初始化项目（如果没有package.json）
然后

npm install --save-dev webpack webpack-cli webpack-dev-server

创建webpack配置文件

在项目根目录下创建一个webpack.config.js文件

const path = require('path');

module.exports = {
  entry: './src/index.js',  // 入口文件
  output: {
    filename: 'bundle.js',  // 输出文件
    path: path.resolve(__dirname, 'dist'),  // 输出路径
  },
  resolve: {
    extensions: ['.js', '.json', '.wasm', '.mjs', '.ts', '.tsx'], // 解析文件扩展名
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,  // 处理 JavaScript 文件
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',  // 使用 Babel 编译 ES6+ 代码
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
  devServer: {
    static: path.join(__dirname, 'dist'),
    port: 3000,  // 本地服务器端口
  },
};

创建Babel配置文件

为了使用较新的JavaScript特性，需要安装Babel并配置。
如果你的node_modules文件夹中没有Babel，则安装Babel依赖：

npm install --save-dev @babel/core @babel/preset-env babel-loader

构建和启动开发服务器

在 package.json中添加如下命令：

{
  "scripts": {
    "build": "webpack",
    "start": "webpack serve --open"
  }
}

然后

npm run build
npm start

就可以成功使用webpack打包解决所有问题啦

P …

如果遇到:

The 'mode' option has not been set, webpack will fallback to 'production' for this value.

则需用mode选项告知webpack采用相应的内置优化。
在webpack.config.js中设置：

module.exports = {
  mode: 'development', //（为开发环境配置） 或 'production'(为生产环境配置) 或 'none'
};

如果遇到:

This is disabled by default, as it risks exposing your secret API credentials to attackers.
If you understand the risks and have appropriate mitigations in place,
you can set the dangerouslyAllowBrowser option to true, e.g.,

其实解决方法也告诉你了，直接在js代码中设置dangerouslyAllowBrowser:true,就行
如

const openai = new OpenAI({
  apiKey: 'your-api-key',
  dangerouslyAllowBrowser: true,
});

当然，这是在本地调试，不怕apikey暴露的情况下。
最安全的还是通过后端服务器来调用api。
本文就不涉及了哈(纯小白，后端搞不了一点:( )

最后，感谢Chat-GPT的大力支持哈哈哈

THE END