解决浏览器跨域加载本地文件报错 Access to script at ‘xxx‘ from origin ‘null‘ has been blocked by CORS policy

本文介绍了一种通过本地搭建server服务器来解决跨域访问的方法,包括使用http-server工具的安装及配置步骤。

报错:

Failed to load resource: net::ERR_FILE_NOT_FOUND 

Access to script at 'xxx' 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.

Failed to load resource: net::ERR_FAILED

解决办法:

本地搭建一个server服务器
安装http-server,用npm、cnpm等等都行;
1、打开cmd,全局安装。记得用管理员身份,不然会报错:

>npm install http-server -g

2、打开跨域文件所在文件夹,即需要共享的资源目录。比如A项目下的X.html跨域,则进入A文件夹目录,输入:

>http-server

会显示可用服务,就可以顺利运行了;
3、终止服务,cmd里点击ctrl+c就停止了。

### 浏览器CORS政策导致fetch请求被阻拦的解决方案 当浏览器执行 `fetch` 请求时,如果目标资源位于不同的源(即协议、名或端口号不同),可能会触发 CORS 政策。为了使请求成功完成,可以采取以下几种方式: #### 方法一:通过服务端支持CORS 服务端可以通过设置特定的HTTP响应头来允许请求。以下是常见的CORS头部及其作用: - **Access-Control-Allow-Origin**: 指定哪些源可以访问资源。例如,将其设为 `"*"` 表示允许任何源访问[^5]。 - **Access-Control-Allow-Methods**: 定义允许使用的HTTP方法,如GET, POST等。 - **Access-Control-Allow-Headers**: 列出客户端可以在实际请求中发送的额外HTTP头部。 对于 Django 应用程序,可以安装并配置 `django-cors-headers` 插件以简化此过程。具体操作如下: 1. 安装插件:`pip install django-cors-headers` 2. 将 `'corsheaders'` 添加到项目的 `INSTALLED_APPS` 中。 3. 在中间件列表中添加 `'corsheaders.middleware.CorsMiddleware'` 并确保其位置在其他中间件之前。 4. 配置允许的源和其他参数,例如: ```python CORS_ALLOWED_ORIGINS = [ "http://localhost:8080", "http://example.com" ] ``` 这种方法适用于生产环境中需要长期解决问题的情况。 #### 方法二:前端代理配置 在开发阶段,通常会利用 Webpack 或 Vue CLI 提供的功能实现本地代理。例如,在 Vue 项目中的 `vue.config.js` 文件里定义 devServer 的 proxy 属性即可重写路径从而绕过限制[^2]: ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://your-backend-server.com', changeOrigin: true, pathRewrite: { '^/api': '' } } } } }; ``` 然而需要注意的是,这种方式仅限于开发环境下有效,一旦应用部署至线上环境便不再适用。 #### 方法三:调整 fetch 请求模式 有时即使存在情况也可以尝试更改 fetch API 的 mode 参数为 no-cors 来避免直接抛出异常[^4]。不过要注意此时返回的数据会被屏蔽(opaque),意味着无法读取具体的响应内容。因此除非确实不需要处理结果数据或者只是单纯发起一个通知性质的POST调用之类的场景下才考虑采用这种手段。 ```javascript fetch('https://other-domain.example/path', { method: 'POST', body: JSON.stringify(data), headers:{ 'Content-Type':'application/json' }, mode:'no-cors' // 不携带cookies等敏感信息的情况下可选此项规避部分简单请求类型的检测机制 }) .then(response => console.log('Request finished!')) .catch(error=>console.error('There was a problem with the request:',error)); ``` 以上三种途径能够针对性地应对由CORS引发的各种状况下的fetch难题。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值