Access to XMLHttpRequest at‘httplocalhost跨域问题解决

最新推荐文章于 2024-05-28 22:24:17 发布
最新推荐文章于 2024-05-28 22:24:17 发布
阅读量4.2k 收藏 2
点赞数
分类专栏： 前端 html 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67391677/article/details/123419659
版权
前端 同时被 2 个专栏收录
26 篇文章 0 订阅
订阅专栏
html
26 篇文章 0 订阅
订阅专栏

在vue.config.js里配置跨域请求

跨域问题报错

在这里插入图片描述

解决

  • 在vue.config.js中配置

    module.exports = {

    // 配置跨域请求
    devServer: {
    port: 8080,
    host: ‘localhost’,
    open: true,
    https: false,
    proxy: {
    ‘/api’: {
    target: ‘http://需要请求的地址/’,
    ws: true,
    changeOrigin: true,
    pathRewrite: {
    ‘^/api’: ‘’
    }
    }
    }

    }

    }

!在环境变量中或者在baseURL中更改地址值为’/api’

-.env.development

 VUE_APP_API_URL=  /api

-.env.production

VUE_APP_API_URL=  /api
m0_67391677
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
PHP Ajax跨域问题解决方案代码实例
01-19
本文通过设置Access-Control-Allow-Origin来实现跨域。 例如：客户端的域名是client.runoob.com，而请求的域名是server.runoob.com。 如果直接使用ajax访问，会有以下错误： XMLHttpRequest cannot load ...
NODE.JS跨域问题的完美解决方案
12-23
在Node.js中，解决跨域问题主要通过设置HTTP响应头来实现。在描述中提到的解决方案中，开发者在`app.js`文件中使用了Express框架，并添加了一段代码来允许跨域请求。这部分代码如下： ```javascript var express = ...
【跨域问题】Access to XMLHttpRequest at‘http://localhost:跨域问题解决
qq_37952113的博客
09-03 15万+
错误： Access to XMLHttpRequest at ‘http://localhost:3000/framework/create’ from origin ‘http://localhost:4200’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control ...
【跨域问题】Access to XMLHttpRequest at'http://localhost:解决跨域问题
weixin_45560008的博客
09-26 6万+
注解实现方法： https://www.cnblogs.com/fanshuyao/p/7168471.html
【跨域问题】Access to XMLHttpRequest at‘http://localhost:解决跨域问题
最新发布
XING的博客
05-28 734
【代码】【跨域问题】Access to XMLHttpRequest at‘http://localhost:解决跨域问题。
Access to XMLHttpRequest at ‘http://localhost:9090/api/user‘ from origin ‘http://localhost:9876‘ has
m0_56843184的博客
01-28 1669
Access to XMLHttpRequest at ‘http://localhost:9090/api/user‘ from origin ‘http://localhost:9876‘ has
控制台报错Access to XMLHttpRequest at ‘http://‘ from origin ‘http://‘ has been blocked by CORS policy
lph159的博客
03-21 3554
期初我是在写前端代码进行调试，其中用到了axios，打开控制台一直在报上面的错误，以为是跨域的问题，所以一直针对跨域问题进行调试，但是还是解决不了，后来发现我的前端代码有些小错误，axios的method后面是没有s的（我写成了methods），修正之后还是解决不了。在解决跨域问题的时候引入了一些其他依赖，我把依赖去除，问题解决了...绷不住了啊。依赖添加多了会出问题，我针对跨域去解决问题的时候，添加了如下依赖，导致控制台出错。axios的method不带s，所以一定要细心。这个问题，纠缠了我很久。
Access to XMLHttpRequest at ‘http://localhost:3000/first‘ from origin ‘null‘ has been blocked by COR
qq_45575177的博客
09-15 1563
今天学习到ajax，启动app.js时，打开html文件查看控制台出现下面报错 查了资料发现是跨域问题 解决方案： 1.在app.js中添加以下代码 设置允许跨域访问该服务 app.all('*',function(req,res,next){ res.header("Access-Control-Allow-Origin","*"); res.header('Access-Control-Allow-Methods','PUT,GET,POST,DEL...
vue-socket.io跨域问题有效解决方法
10-15
Vue-Socket.IO是一个用于在Vue.js应用程序中集成Socket.IO的库，它允许实现实时双向通信。然而，当你在开发过程中遇到跨域问题时，这可能会阻碍你的应用正常工作。...Access to XMLHttpRequest at '...
Java Spring boot 2.0 跨域问题的解决
08-27
Java Spring Boot 2.0 跨域问题的解决 ...然而，出于安全考虑，浏览器会限制脚本中发起的跨站请求。...跨域问题的解决方法有很多，但是不管使用哪种方法，都是为了解决跨域问题，从而实现 Web 应用程序的安全和强大。
解决跨域：“Access to XMLHttpRequest at ‘http127.0.0.18081‘ from origin ‘httplocalhost8080‘“
m0_61083409的博客
03-10 2949
在使用 vue 过程中经常会向服务器请求数据，但是时常会发生跨域的错误，具体什么是“跨域”请自行百度，这里说明一下怎么解决这个问题。 1、在 vue.config.js 文件中配置如下操作： 2、在 main.js 中修改baseURL 3、在服务器中配置允许跨域 ...
解决跨域问题：Access to XMLHttpRequest at ‘http://localhost:8080/xxx‘ No ‘Access-Control-Allow-Origin‘ head
一觉睡过头的菜鸡的博客
05-30 7万+
文章目录一、问题二、问题产生的原因三、解决方法1. 问题出现在我们没有带标头，我们就带上标头2. 使用插件扩展 一、问题 当我实现前后端分离的时候，遇到了这个问题： Access to XMLHttpRequest at ‘http://localhost:8080/xxx’ from origin ‘http://localhost:63342’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is pre
【跨域问题】Access to XMLHttpRequest at'http://localhost:解决跨域问题，前后端连调，前端Vue后端SSM，解决Vue项目打包后打开页面图片不显示问题
OrangeChenZ的博客
01-14 22万+
问题： Failed to load resource: net::ERR_CONNECTION_REFUSED 这个问题我是因为后端服务没有启动，报错的； 跨域问题： Access to XMLHttpRequest at ‘http://localhost:9090/guidance/findGuidancePage’ from origin ‘http://localhost:8000’ h...
bug：Acess to XMLHttpRequest at ‘localhost:8080/test‘ from origin ‘http://localhost:8081‘ has been b
weixin_44107140的博客
04-23 3412
当你在浏览器控制台遇到下面的报错： Access to XMLHttpRequest at ‘localhost:8080/test’ from origin ‘http://localhost:8081’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, edge, https, chrome-untru
Access to XMLHttpRequest at 'http://localhost:8080/api/user/login' from origin 'http://localhost:808
热门推荐
LPLIFE的博客
04-21 24万+
用nodejs+express封装自己的api，遇到跨域问题 原本我是这样写进去的： //设置跨域访问 app.all('*', function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "X-Req...
ASP.NET Access to XMLHttpRequest at http://localhost 跨域问题解决
weixin_44313037的博客
06-08 1247
Web.Config中添加以下配置 <system.webServer> </system.webServer> 如果提示Access-Control-Allow-Origin 只能，only可以设置value的值。
前端跨域主流解决方案（Access to XMLHttpRequest at ‘http..’ from origin ‘null‘ has been blocked by CORS policy）
weixin_43239880的博客
04-06 2万+
前端跨域主流解决方案（Access to XMLHttpRequest at ‘http..’ from origin ‘null‘ has been blocked by CORS policy）
vue跨域问题解决:Access to XMLHttpRequest at
10-11
在Vue中解决跨域问题有几种方法。以下是其中两种常用的方法： 1.在后端配置允许跨域访问：在后端服务器上设置响应头来允许跨域请求。对于使用Node.js的Express框架，可以使用cors模块来实现。安装cors模块并在后端代码中添加以下代码： ```javascript const express = require('express'); const cors = require('cors'); const app = express(); app.use(cors()); // 其他路由和中间件 app.listen(3000, () => { console.log('Server started on port 3000'); }); ``` 2.使用代理解决跨域问题：在Vue项目的配置文件（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`，并且将路径中的`/api`去掉。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值