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

最新推荐文章于 2024-02-02 18:42:29 发布
最新推荐文章于 2024-02-02 18:42:29 发布
阅读量969 收藏
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/web_ding/article/details/119760348
版权

背景:公司需要把前端代码打包成静态文件，但是初始化打包，发现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

 

时光机上敲代码
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
出现 has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ header is present on the 解决方法
码农研究僧的博客
06-03 1594
Access to XMLHttpRequest at 'http://127.0.0.1:5000/api/data' from origin 'http://10.197.0.79:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
nuxt静态部署打包相对路径操作
01-22
以往在nuxt项目中，打包静态化部署的的文件如下： 路径为绝对路径，当项目的域名为二级域名的时候，就不能打包为这绝对路径了。 nuxt不同于vue项目，思索了许久，终于找到了配置的地方： nuxt项目中 nuxt.config.js...
vue源码运行报错[!] (plugin Rollup Core) Error: Could not load 解决办法
会飞的咕咕鱼的博客
12-31 4124
[!] (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:
origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present
热门推荐
mcfeng blog
09-16 6万+
aa
前端项目启动报错：from origin ‘null‘ has beenblocked by CORS policy: Cross origin requests are only supported
2201_75568521的博客
08-25 1977
把本地图片地址转成http//https 网址再用项目就可以启动不会报错啦。
Springboot处理CORS跨域请求的三种方法 报错报错rom origin ‘null‘ has been blocked by CORS policy: No ‘Access-Control-
weixin_53669566的博客
12-24 2658
CORS是一个W3C标准，全称是”跨域资源共享”（Cross-origin resource sharing），允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。它通过服务器增加一个特殊的Header[Access-Control-Allow-Origin]来告诉客户端跨域的限制，如果浏览器支持CORS、并且判断Origin通过的话，就会允许XMLHttpRequest发起跨域请求。
Nuxt运行generate静态打包部署报is not in cwd
Cool_so_cool的博客
03-02 952
先看看报错 运行 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.js添加环境变量,区分项目打包环境操作
01-18
最近由于业务需求，开发了一个nuxt.js项目。 配置打包环境变量时，发现nuxt.js的文档过于简单，无法做参照。 经查证了一些资料后，解决了该问题。遂整理成文档，发布于此，给同行一些参照。 一、添加cross-env插件 ...
vue cli3.0打包上线静态资源找不到路径的解决操作
10-15
在使用 Vue CLI 3.0 进行项目打包时，可能会遇到静态资源（如图片、CSS、JavaScript 文件等）找不到路径的问题。这个问题通常出现在部署到服务器后，因为本地开发环境与线上环境的资源路径不同。以下是如何解决这个...
nuxt+axios实现打包后动态修改请求地址的方法
10-15
主要介绍了nuxt+axios实现打包后动态修改请求地址的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
记一次 Nuxt 3 在 Windows 下的打包问题.doc
07-13
Nuxt 3 在 Windows 下的打包问题解决方案 Nuxt 3 是一个基于 Vue.js 的服务器端渲染框架，旨在帮助开发者快速构建高性能的 Web 应用程序。然而，在 Windows 平台下使用 Nuxt 3 时，可能会遇到一些问题，例如打包...
NUXTJS安装始终报错无法正常运行问题解决
最新发布
觉醒法师的专栏
02-02 1369
近日在了解NuxtJS，按照官方给出方法进行安装后，不是报错，就是安装成功后运行不了。执行npm run dev后始终运行出错，判断肯定是对应版本问题，沿着这方向研究，最终运行成功了。
nuxt部署的路径问题
关中刀客在青岛
10-24 4709
这里是一个通过 npx create-nuxt-app生成的SPA单页面应用，要部署成一个静态项目，先用命令打包 nuxt generate 但dist目录下直接生成的项目跑不起来，js等资源用了绝对路径而找不到，原因是路由输出默认的绝对路径。 要在nuxt.config.js里添加router的base为“./”； 如果这时打包发现引用的js找到了，但首页却找不到了，经多次尝试，把ro...
Nuxt部署到静态网站托管
qq_41763654的博客
05-06 897
最开始了解到Nuxt是在vue SSR下了解到，用过之后感觉真香。 可以省去路由划分的时间，Nuxt.js 会读取该目录下所有的 .vue 文件并自动生成对应的路由配置、进一步封装Vuex等等。下面来介绍 如何将Nuxt部署到静态托管上？ 云开发（TencentCloudBase，TCB）\color{#4285f4}{ 云开发（Tencent CloudBase，TCB）}云开发（Tencent...
Nuxtpress - Node.js 动态网站静态化之路
Willin Wang 的全栈升级指南
12-25 979
相信 Hexo、Ghost、WordPress 等常见的开源内容框架对于很多人来说都不陌生。 看到这张简单的示意图，应该能够发现，传统的网站生成有两种方式： 一种是类似于 Hexo，纯静态的，通过 markdown 编辑文章内容，然后执行命令生成静态网站； 另一种是类似于 Ghost，纯动态的，通过管理后台编辑文章（存入数据库，如 MySQL），然后通过渲染器进行渲染，网站内容为动态的，需要在服务器上跑一个服务（程序）。 而 WordPress（PHP）之类的框架有一些天然的优势，就是能够很方便地生成
[技术翻译]使用Nuxt生成静态网站
小磊哥er @ 大前端工程师
01-06 1099
本周再来翻译一些技术文章，本次预计翻译三篇文章如下： 04.[译]使用Nuxt生成静态网站(Generate Static Websites with Nuxt) 05.[译]Web网页内容是如何影响电池功耗的(How Web Content Can Affect Power Usage) 06.[译]在现代JavaScript中编写异步任务(https://web.dev/off-m...
nuxt 部署到服务器上之后访问不到 js
qq_50319351的博客
04-19 813
问题：nuxt 部署net::ERR_ABORTED 404 (Not Found），本地运行 npm start 就没有问题。这里注释掉就好了，可能是因为_nuxt是虚拟目录，和这里的配置冲突。问题出在了 nginx配置的原因。以下是nginx配置代码。
Nuxt3中使用Hooks报错 “ nuxt instance unavailable“
Florenza的博客
08-15 2878
原因在 hooks中 去实现了 router route。改成 传入的形式不报错。
Nuxt3区分环境打包报错“flase.appcet is not function“
Florenza的博客
08-28 742
此版本的时候在 dev 运行模式下不会报错,用其他版本 我用最终使用的 是。经测试,是版本问题 当用 nuxt3。但是 打包后在运行会报错。
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、付费专栏及课程。

余额充值