正文
前后端分离 导致的 静态页面 加载 <script type="module" > 报CORS 跨域错误，提示 blocked by CORS policy
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
1.前言
静态页面 加载 <script type="module" > 报CORS 跨域错误，提示Access to script at
ftp:///xxx.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.
一般前后端分离的 java工程 的静态页面 都放在项目的resources 里面 ，或者放在 .net 站点 ，以及其他的软件插件里 ，很难遇到 调用静态文件导致 CORS 跨域错误，
最多的也就是前端访问后端报 CORS 跨域错误。
但是 ，我只是想把静态文件放在我喜欢的某个文件夹里面，没有工程，.net不会搞 ，不希望弄很复杂的操作和配置，也不想更改浏览器的安全机制，该怎么办呢？
比如我有个html 和 js 文件 ，放在桌面的一个文件中，正常html加载本地 js 是可以的 ，但是如果引入的类型是
<script type="module" >
，这倒好，直接报错
百度找到了很多方法，虽然可以解决，但是要么是麻烦，要么就是不适合发布使用，总不能让客户修改浏览器权限吧？
怎么办？
好办，使用nginx
只需要在nginx.conf 文件配置一下监听端口和路由参数，将符合获取静态文件的请求路由到本地静态文件即可
如
我要访问本地的 D:/我的项目/static/js/ j1.js
假设监听的端口为55
那么访问 localhost:55/js/j1.js
即可
也就是说，把所有获取静态文件的接口都用nginx来路由，
对于nginx来说，这些静态文件位置可以随意放置，
但是对于浏览器来说，这些静态文件都是存在 localhost:55 的地方，也就是同源资源，不会再报 CORS 跨域，
也适合发布生产，如果需要替换文件，直接替换就行了，不需要打包编译，不需要解码，适合各种服务器，
虽然.net 容器也有类似的功能，但是相对麻烦一点，体积也膨大，需要配置很多东西，不像nginx解压就能用
前后端分离 导致的 静态页面 加载 <script type="module" > 报CORS 跨域错误，提示 blocked by CORS policy的更多相关文章- 谷粒商城为什么要选择后天管理用vue前后端分离，而商城页面选择Thymeleaf类？
1.最初使用jsp开发web项目 还记得刚学习Java的时候,自己开发一个web项目,那时候前后端分离还不流行,为了在页面中显示动态数据,最终的形式也就是以动态网页响应用户,Java一种技术jsp,J ...
- 20180911 关于页面加载顺序引发的JS的undefined/null错误
引用: 百度知道-HTML+JavaScript执行顺序问题 这是我在学习JS滚动播放图片案例意外遇到的一个问题,代码完成后console弹出错误警告: Uncaught TypeError: Can ...
- 1、4 前后端分离，写静态HTML文件，通过ajax 返回数据
1.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...
- macOS下加载动态库dylib报";code signature invalid";错误的解决办法
一.现象描述 在macOS上搞开发也有一段时间了,也积攒了一定的经验.然而,今天在替换工程中的一个动态库时还是碰到了一个问题.原来工程中用的是一个静态库,调试时发现有问题就把它替换成了动态库.这本来没 ...
- python解决自动化测试静态页面加载慢的情况
# coding:utf8from selenium import webdriverimport time # 创建一个ChromeOptions的对象option = webdriver.Chro ...
- nodeJS（express4.x）+vue（vue-cli）构建前后端分离详细教程(带跨域)
好想再回到大学宿舍,当时床虽小,房随小,但是心确是满的 ----致 西安工程大学a-114舍友们 转载请注明出处:水车:http://www.cnblogs.com/xuange306/p/6185 ...
- 基于前后端分离的Nginx+Tomcat动静分离
1.什么是动静分离 "动"与"静" 在弄清动静分离之前,我们要先明白什么是动,什么是静. 在Web开发中,通常来说,动态资源其实就是指那些后台资源,而静态资源就 ...
- 重写IHttpHandler,实现前后端分离
再说重写IHttpHandler,实现前后端分离 aspx页面第一次加载时,HttpHandler 里面是如何编译指定页面的呢?Framework提供了编译页面的API如下: BuildManag ...
- 再说重写IHttpHandler,实现前后端分离
aspx页面第一次加载时,HttpHandler 里面是如何编译指定页面的呢?Framework提供了编译页面的API如下: BuildManager.CreateInstanceFromVirtua ...
随机推荐- SQL Server 求结果
;with cte as ( select CONVERT(DATE, DATEADD(DAY, -9, GETDATE())) as paytime union all select datead ...
- unity3d asset store下载的代码所在位置
Asset Store下载了官方的示例,却找不到了,又不想重新下载 PC:C:\Users\PCNAME\AppData\Roaming\Unity\Asset StoreMAC:"~/Li ...
- Linux 配置网络
1.vi /etc/sysconfig/network-scripts/ifcfg-eth0 2. # Advanced Micro Devices [AMD] 79c970 [PCnet32 LA ...
- Poj 1013 Counterfeit Dollar / OpenJudge 1013(2692) 假币问题
1.链接地址: http://poj.org/problem?id=1013 http://bailian.openjudge.cn/practice/2692 http://bailian.open ...
- Hibernate简单的基础理论
和Hibernate有关的概念,是掌握Hibernate必须了解的知识.就个人经验来说,可以在了解如何简单开发Hibernate之后,再来学习这些概念,这样可以有个比较清楚的认识.Hibernate是 ...
- HDU2516-取石子游戏
取石子游戏 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Subm ...
- 【iOS】Swift ？和 ！（详解）
Swift语言使用var定义变量,但和别的语言不同,Swift里不会自动给变量赋初始值, 也就是说变量不会有默认值,所以要求使用变量之前必须要对其初始化 .如果在使用变量之前不进行初始化就会报错: [ ...
- 2-postman批量执行接口
1.postman环境设置与使用 1)点击设置,添加按钮 2)填写环境名称,参数 3)切换环境 4)使用环境变量,使用格式为:{{变量名}} 2.postman批量执行接口 1)选择要执行的文件夹,点 ...
- 第五次Scrum冲刺
第五次Scrum冲刺 1.成员今日完成情况 队员 今日完成任务 刘佳 前端初步构建 李佳 后端设计初级阶段 周世元 数据设计 杨小妮 博客编写 许燕婷 管理团队当日及次日任务 陈水莲 测试矩阵用例设计 ...
- Linux（Ubuntu）下也能用搜狗输入法了！！！
Ubuntu原生的中文输入法是不是总有点别扭? 不用再别扭了. 告诉你一个好消息:Linux(Ubuntu)下也能用搜狗输入法了!!! 下载地址:http://pinyin.sogou.com/lin ...
1.最初使用jsp开发web项目 还记得刚学习Java的时候,自己开发一个web项目,那时候前后端分离还不流行,为了在页面中显示动态数据,最终的形式也就是以动态网页响应用户,Java一种技术jsp,J ...
引用: 百度知道-HTML+JavaScript执行顺序问题 这是我在学习JS滚动播放图片案例意外遇到的一个问题,代码完成后console弹出错误警告: Uncaught TypeError: Can ...
1.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...
一.现象描述 在macOS上搞开发也有一段时间了,也积攒了一定的经验.然而,今天在替换工程中的一个动态库时还是碰到了一个问题.原来工程中用的是一个静态库,调试时发现有问题就把它替换成了动态库.这本来没 ...
# coding:utf8from selenium import webdriverimport time # 创建一个ChromeOptions的对象option = webdriver.Chro ...
好想再回到大学宿舍,当时床虽小,房随小,但是心确是满的 ----致 西安工程大学a-114舍友们 转载请注明出处:水车:http://www.cnblogs.com/xuange306/p/6185 ...
1.什么是动静分离 "动"与"静" 在弄清动静分离之前,我们要先明白什么是动,什么是静. 在Web开发中,通常来说,动态资源其实就是指那些后台资源,而静态资源就 ...
再说重写IHttpHandler,实现前后端分离 aspx页面第一次加载时,HttpHandler 里面是如何编译指定页面的呢?Framework提供了编译页面的API如下: BuildManag ...
aspx页面第一次加载时,HttpHandler 里面是如何编译指定页面的呢?Framework提供了编译页面的API如下: BuildManager.CreateInstanceFromVirtua ...
- SQL Server 求结果
;with cte as ( select CONVERT(DATE, DATEADD(DAY, -9, GETDATE())) as paytime union all select datead ...
- unity3d asset store下载的代码所在位置
Asset Store下载了官方的示例,却找不到了,又不想重新下载 PC:C:\Users\PCNAME\AppData\Roaming\Unity\Asset StoreMAC:"~/Li ...
- Linux 配置网络
1.vi /etc/sysconfig/network-scripts/ifcfg-eth0 2. # Advanced Micro Devices [AMD] 79c970 [PCnet32 LA ...
- Poj 1013 Counterfeit Dollar / OpenJudge 1013(2692) 假币问题
1.链接地址: http://poj.org/problem?id=1013 http://bailian.openjudge.cn/practice/2692 http://bailian.open ...
- Hibernate简单的基础理论
和Hibernate有关的概念,是掌握Hibernate必须了解的知识.就个人经验来说,可以在了解如何简单开发Hibernate之后,再来学习这些概念,这样可以有个比较清楚的认识.Hibernate是 ...
- HDU2516-取石子游戏
取石子游戏 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Subm ...
- 【iOS】Swift ？和 ！（详解）
Swift语言使用var定义变量,但和别的语言不同,Swift里不会自动给变量赋初始值, 也就是说变量不会有默认值,所以要求使用变量之前必须要对其初始化 .如果在使用变量之前不进行初始化就会报错: [ ...
- 2-postman批量执行接口
1.postman环境设置与使用 1)点击设置,添加按钮 2)填写环境名称,参数 3)切换环境 4)使用环境变量,使用格式为:{{变量名}} 2.postman批量执行接口 1)选择要执行的文件夹,点 ...
- 第五次Scrum冲刺
第五次Scrum冲刺 1.成员今日完成情况 队员 今日完成任务 刘佳 前端初步构建 李佳 后端设计初级阶段 周世元 数据设计 杨小妮 博客编写 许燕婷 管理团队当日及次日任务 陈水莲 测试矩阵用例设计 ...
- Linux（Ubuntu）下也能用搜狗输入法了！！！
Ubuntu原生的中文输入法是不是总有点别扭? 不用再别扭了. 告诉你一个好消息:Linux(Ubuntu)下也能用搜狗输入法了!!! 下载地址:http://pinyin.sogou.com/lin ...
