• 前后端分离 导致的 静态页面 加载 <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解压就能用

  • 相关阅读:
    提高你的Java代码质量吧:正确使用String、StringBuffer、StringBuilder
    IAAS云计算产品畅想-云主机产品内涵
    Boa服务器在ARM+Linux上的移植
    二叉树的遍历的迭代和递归实现方式
    OpenRisc-42-or1200的ALU模块分析
    根据不同的下拉值,出现相应的文本输入框
    boost------asio库的使用2(Boost程序库完全开发指南)读书笔记
    C++一些注意点之操作符重载
    mac下修改mysql的默认字符集为utf8
    jquery_EasyUI的学习
  • 原文地址:https://www.cnblogs.com/c2g5201314/p/14606252.html
Copyright © 2020-2023  润新知