vite2+vue3打包后浏览器打开跨域浏览器的错误

浏览器打开html.index ：

Access to script at 'file:///D:/hehai/viteObj/dist/assets/index.559fd86e.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

Vite 为没有传统模块系统设计，模块是其特性推荐。

或者，你可以在应用内部署一个自定义方案来使用这个嵌入页面（example-app://什么的），这样可以正常激活 ES Modules 特性，从规避问题开始。

解决方法一：

在VScode内安装Live Server插件

配置 vite.config.ts

打包好html.index后点击VSode 下的Go Live启动服务

启动后默认5500端口 http://127.0.0.1:5500/dist/index.html

解决方法二：

@vitejs/plugin-legacy 43利用@vitejs/plugin-legacy 43生成没有模块的版本

vite.config.ts配置如下：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import legacy from '@vitejs/plugin-legacy';// https://vitejs.dev/config/
export default defineConfig({base: './',plugins: [vue(),legacy({targets: ['ie>=11'],additionalLegacyPolyfills: ['regenerator-runtime/runtime'],}),],
});

对打包后的index.html进行处理

去除<script type=module>元素
除去其他<script>的nomodule属性
移除<script id=vite-legacy-entry>元素的内容，并将data-src属性名改为src
移除 <script id=vite-legacy-entry></script>内的代码
将所有资源地址修改为相对地址（例如/assets/index-legacy.xxxx.js改为./assets/index-legacy.xxxx.js注意，还有 CSS 文件）

直接浏览器打开index.html 问题解决

注：此方法建议部署前做好充分测试

vite2+vue3打包后浏览器打开跨域浏览器的错误相关推荐

chrome浏览器的跨域设置 Google Chrome浏览器下开启禁用缓存和js跨域限制--disable-web-security...
chrome用户默认路径 Win7:C:\Users\[用户名]\AppData\Local\Google\Chrome\User Data\ XP:C:\Documents and Settings ...
data 谷歌浏览器更改user 路径_chrome浏览器的跨域设置——包括版本49前后两种设置...
做前后分离的webapp开发的时候,出于一些原因往往需要将浏览器设置成支持跨域的模式,好在chrome浏览器就是支持可跨域的设置,网上也有很多chrome跨域设置教程.但是新版本的chrome浏览器提 ...
血淋淋的教训—将Vue项目打包成app的跨域问题
1 devServer: { 2 host: '192.168.1.58', 3 port: 9999, 4 historyApiFallback: true, 5 noInfo: true, 6 o ...
chrome浏览器的跨域设置
chrome浏览器的跨域设置--包括版本49前后两种设置做前后分离的webapp开发的时候,出于一些原因往往需要将浏览器设置成支持跨域的模式,好在chrome浏览器就是支持可跨域的设置,网上也有很多 ...
魔坊APP项目-17-种植园，商城页面、服务端提供商品api，解决App打包编译以后的跨域限制、客户端获取商品列表并进行展示，集成Alipayplus模块完成支付
种植园一.商城页面 orchard.html,代码: <!DOCTYPE html> <html> <head><title>用户中心</tit ...
前端浏览器的跨域问题
相信前端开发必定少不了这个问题. 什么是跨域呢跨域是浏览器的行为,跨域问题其实就是浏览器的同源策略所导致的.同源策略是一个重要的安全策略,它用于限制一个origin的文档或者它加载的脚本如何能与另一 ...
屏蔽谷歌chrom浏览器的跨域检测的最新方案
一直没更新,惭愧,贴上当前chrom版本屏蔽跨域方法,简单四步搞定在桌面上新建文件夹Access-Control-Allow-Origin 找到桌面上的chrome快捷图标,右键属性 ,找到目标输 ...
Chrome浏览器设置跨域访问【新旧版本两种方式设置】
一般我们在进行前后分离的项目 webapp 开发,或者 H5 移动 App 开发时,我们会使用 PC 端浏览器进行开发调试.但默认情况下 Ajax 请求无法跨域访问,请求时会报如下错误: XMLHtt ...
AJAX跨域问题解决方法（1）——禁止浏览器进行跨域限制
思路:通过命令行修改浏览器启动参数,使得浏览器不进行跨域检查,从而允许跨域方法:命令行参数启动浏览器后添加参数--disable-web-security 例: chrome --disable-w ...

vite2+vue3打包后浏览器打开跨域浏览器的错误

vite2+vue3打包后浏览器打开跨域浏览器的错误相关推荐

最新文章

热门文章