nuxt项目打包成静态包，解决报错：xxx from origin ‘null‘ has been blocked by CORS policy

最新推荐文章于 2024-03-29 13:31:21 发布
原创 最新推荐文章于 2024-03-29 13:31:21 发布 · 1.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

本文讲述了在使用Nuxt.js时遇到的js引用路径问题，通过修改nuxt.config.js中的mode和base配置，并调整modern和mode配置，解决了打包过程中的错误。阅读者将了解到如何确保前端代码的正确引用和部署配置。

背景:公司需要把前端代码打包成静态文件，但是初始化打包，发现js报错。经过一番研究，解决了这个问题。

报错信息：

 第一步：解决js引入路径问题

在nuxt.config.js中修改js引用配置路径：添加mode 和 base配置，必须使用mode:hash,base:'./',为了js能成功引用到路径

第二部：配置模式；

modern 配置去掉，默认modern为false  mode配置去掉：默认为universal

Doc: https://zh.nuxtjs.org/api/configuration-mode

Doc: https://zh.nuxtjs.org/api/configuration-modern

 

vue2/3 | nuxt - 报错 Error: error:0308010C:digital envelope routines::unsupported（node项目启动运行、打包时报错，解决）
高级前端工程师
04-17 3035
vue2，vue3，nuxt，node.js，错误代码error:0308010C，Error: error:0308010C:digital envelope routines::unsupported，vue项目运行报错，升级webpack无效，webpack升级后依然无效，node升级降级无效，webpack降级也不行，vite升级无效怎么办，nuxt运行时出现报错，node项目出错怎么办，vue报错怎么办，终端报错无法启动，详细解决教程，nuxt无法启动报错，网站启动不了并报错digital env
nuxt2/3 - 创建项目报错Error: Failed to download template from registry: fetch failed，nuxt初始化创建新项目失败无法创建（详解
最新发布
高级前端工程师
07-05 2597
nuxt2，nuxt3，报错，解决无法创建项目，Nuxt3报错创建不了项目，无法初始化创建项目，Error: Failed to download template from registry: fetch failed，初始化nuxt 项目报错，详细解决办法，host设置了还是无效，安装nuxt3报错，安装nuxt3时一直报错，nuxt3安装 解决报错，安装nuxt3报错 Error: Failed，Nuxt3创建项目报错问题解决方案，初始化Nuxt一直报错，npx nuxi init，安装命令，怎么办，
Nuxt运行generate静态打包部署报is not in cwd
Cool_so_cool的博客
03-02 1172
先看看报错 运行 npm run generate 打包的时候发现报错，但是运行 build 与 dev 正常。生成应用程序时，会跳入虚拟 Linux 机器以获取dist，也就是Windows系统可能会出现这个问题，然后是Linux系统获取路径，与windows有所不同，需要标准化路径处理 错误是在node_modules@nuxt\cli\dist\cli-generate.js中 const files = await globby__default['default']('**/*.*', {
nuxt打包路劲问题_nuxt静态部署打包相对路径操作_vue.js
weixin_40004502的博客
11-06 1998
以往在nuxt项目中，打包静态化部署的的文件如下：路径为绝对路径，当项目的域名为二级域名的时候，就不能打包为这绝对路径了。nuxt不同于vue项目，思索了许久，终于找到了配置的地方：nuxt项目中 ： module.exports = { router: { base: './' } }打包后的文件：补充知识：nginx部署，nuxt静态部署，路由跳转失效的问题nuxt静态部...
vue源码运行报错[!] (plugin Rollup Core) Error: Could not load 解决办法
会飞的咕咕鱼的博客
12-31 4388
[!] (plugin Rollup Core) Error: Could not load C:\web\vue-2.6.10\vue\src\core\config (imported by C:\web\vue-2.6.10\vue\src\platforms\web\entry-runtime-with-compiler.js): ENOENT: no such file or directory, open 'C:\web\vue-2.6.10\vue\src\core\config'Error:
from origin ‘null‘ has been blocked by CORS policy: Cross origin requests are only supported for pr
qq_51660806的博客
07-18 5194
解决办法： 右键----Open in Live Server (必须以服务器的形式打开)；在加载JS模块的时候，报错！
前端项目启动报错：from origin ‘null‘ has beenblocked by CORS policy: Cross origin requests are only supported
2201_75568521的博客
08-25 5500
把本地图片地址转成http//https 网址再用项目就可以启动不会报错啦。
解决nuxt3生产打包以后运行服务器报错： BScroll.use is not a function
jiaohuizhuang6019的博客
12-15 1086
解决nuxt3生产打包以后运行服务器报错： BScroll.use is not a function
Access to image at from origin has been blocked by CORS policy: No ‘Access-Control-Allow-Origin 此图片来
浮游的博客
03-27 823
最近，在平台上发现很多图片无法展示，显示此图片来自微信公众平台，未经允许不可引用，分析原因后，发现是在发布文章时，富文本编辑器get图片，有跨域问题。在网上搜了很多方案，例如img.setAttribute(‘crossOrigin’, ‘anonymous’)，发现无效，于是想到代理服务器。思路：传递图片地址过去 让后端给转成buffer返回给前端，前端再上传二进制图片，到oss，获得链接。传过去图片地址，前端根据后端返回的blob，上传图片，最终完美解决。在前端富文本中进行配置。新建一个node项目。
精选资源
nuxt静态部署打包相对路径操作
01-22
以往在nuxt项目中，打包静态化部署的的文件如下： 路径为绝对路径，当项目的域名为二级域名的时候，就不能打包为这绝对路径了。 nuxt不同于vue项目，思索了许久，终于找到了配置的地方： nuxt项目中 nuxt.config.js...
axios跨域返回值has been blocked by CORS policy问题
搞代码的博客
02-09 2217
主要是在控制层缺少了一个注解，缺少的这个注解导致了请求返回的数据被拦截了下来 @CrossOrigin 查了一下为啥需要这个注解,出处 注解@CrossOrigin解决跨域问题 注解@CrossOrigin 出于安全原因，浏览器禁止Ajax调用驻留在当前原点之外的资源。例如，当你在一个标签中检查你的银行账户时，你可以在另一个选项卡上拥有EVILL网站。来自EVILL的脚本不能够对你的银行API做出Ajax请求（从你的帐户中取出钱！）使用您的凭据。 跨源资源共享（CORS）是由大多数浏览器实现的W3
Nuxt3区分环境打包报错“flase.appcet is not function“
Florenza的博客
08-28 857
此版本的时候在 dev 运行模式下不会报错,用其他版本 我用最终使用的 是。经测试,是版本问题 当用 nuxt3。但是 打包后在运行会报错。
nuxt3 Vue 3 报错 Invalid vnode type when creating vnode:null
qq_38121975的博客
03-29 1513
vue3，nuxt3中会自动引入components下所有组件在组件使用命名了ref实例名称和组件名称导致页面出现报错提示
Nuxt静态资源文件和部署
weixin_43337481的博客
05-12 723
Nuxt.js 主要关注的是应用的 UI渲染。SSR在服务端将vue渲染成html返回给浏览器。Nuxt.js 是一个基于 Vue.js 的通用应用框架。打包完了之后就是传统的Html文件。
【跨域】nuxt.js axios 前端跨域接口调不通
向着光芒的女孩
06-06 4078
在调试后端接口遇到这样的跨域报错提示： Access to XMLHttpRequest at ‘http://192.168.xxx.xxx:xxx/xxxx’ from origin ‘http://localhost:8010’ has been blocked by CORS policy: The ‘Access-Control-Allow-Origin’ header contain...
Nuxtpress - Node.js 动态网站静态化之路
Willin Wang 的全栈升级指南
12-25 1168
相信 Hexo、Ghost、WordPress 等常见的开源内容框架对于很多人来说都不陌生。 看到这张简单的示意图，应该能够发现，传统的网站生成有两种方式： 一种是类似于 Hexo，纯静态的，通过 markdown 编辑文章内容，然后执行命令生成静态网站； 另一种是类似于 Ghost，纯动态的，通过管理后台编辑文章（存入数据库，如 MySQL），然后通过渲染器进行渲染，网站内容为动态的，需要在服务器上跑一个服务（程序）。 而 WordPress（PHP）之类的框架有一些天然的优势，就是能够很方便地生成
NUXT.JS框架打版后生成静态页面CSS太长解决方法
gamerre的博客
04-20 2013
在开发我们公司的恒相产品画册项目时，使用VUE框架开发SEO就无法优化了，最后采用UNXT.JS框架开发此项目。项目第一阶段开发完毕后，打版上线也没有注意CSS的问题，在使用站长工具查询时，抓取页面数据显示无用代码过长不利于SEO。扒了了好多解决方案，经测试一下方法可用。 一、在NUXT.JS框架中找到nuxt.config.js配置文件； 二、在页面中找到build配置项,如果没有请自行添加； export default { head: {}, css: [], p.
Nuxt3 Cannot read properties of null (reading ‘proxy‘)
Florenza的博客
08-18 1312
出现问题的是 vant 中 van-button。
nuxt 部署到服务器上之后访问不到 js
qq_50319351的博客
04-19 1378
问题：nuxt 部署net::ERR_ABORTED 404 (Not Found），本地运行 npm start 就没有问题。这里注释掉就好了，可能是因为_nuxt是虚拟目录，和这里的配置冲突。问题出在了 nginx配置的原因。以下是nginx配置代码。
vue3 项目中怎么解决跨域 , has been blocked by CORS policy
09-07
在 Vue 3 项目中解决跨域问题可以使用以下几种方法： 1. 代理：配置一个代理服务器来转发请求，绕过浏览器的跨域限制。可以通过在 `vue.config.js` 或者 `nuxt.config.js` 中添加以下配置来实现代理： ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://api.example.com', changeOrigin: true, pathRewrite: { '^/api': '' } } } } } ``` 上述配置中，将以 `/api` 开头的请求转发到 `http://api.example.com`，`changeOrigin` 设置为 `true` 表示修改请求头中的 Origin 字段。 2. 跨域资源共享（CORS）：在服务器端设置响应头来允许跨域请求。可以在后端服务器的响应中添加以下头部： ```javascript app.use((req, res, next) => { res.setHeader('Access-Control-Allow-Origin', '*'); res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE'); res.setHeader('Access-Control-Allow-Headers', 'Content-Type'); next(); }); ``` 上述代码将允许任意来源的请求，并且允许的方法包括 GET、POST、PUT 和 DELETE。 3. JSONP：利用动态创建 `<script>` 标签的方式来获取跨域数据。但是 JSONP 只支持 GET 请求，且只能用于跨域获取 JSON 数据。 以上是解决跨域问题的几种常用方法，在具体的项目中可以根据需求选择适合的方式来解决跨域问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

时光机上敲代码

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值