vue2.x CORS跨域问题解决前端设置

文章目录

前端设置代理
vue.config.js
在这里插入图片描述

其他配置实例:
1、拥有一个config配置目录;在config文件夹下的index.js文件设置proxyTable为

    proxyTable: {
      '/api': {
        target: 'https://demo.crudapi.cn/api/business/',
        changeOrigin: true, // 允许跨域
        pathRewrite: {
          '^/api': ''
        }
      }
    }

在这里插入图片描述
2、在axios中把baseURL改为/api
在这里插入图片描述

3、使用http验证提供凭证(如果有必要)

    auth: {
        username: 'xxx',
        password: 'xxx'
    }

在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue中使用axios发送GET请求解决跨域问题,可以通过以下步骤: 1. 安装axios:在命令行中运行 `npm install axios` 或者 `yarn add axios`,安装axios库。 2. 在Vue组件中引入axios:在需要使用axios的组件中,可以通过import语句引入axios。 ```javascript import axios from 'axios'; ``` 3. 发送GET请求:使用axios的get方法发送GET请求,并设置`Access-Control-Allow-Origin`头部字段。 ```javascript axios.get('http://api.example.com/data', { headers: { 'Access-Control-Allow-Origin': '*' } }).then(response => { // 处理响应数据 }).catch(error => { // 错误处理 }); ``` 解释:跨域请求是指在浏览器上从一个域名的网页向另一个域名的服务器发送请求。由于浏览器的同源策略限制,普通的Ajax请求只能向同一域名下的接口发送请求,无法直接访问其他域名下的接口。为了解决这个问题,可以使用JSONP、CORS等方式进行跨域请求。 上述代码中,使用了Axios库发送GET请求,并在请求头中设置了`Access-Control-Allow-Origin`字段。这个字段指示服务器允许任何源(域、协议和端口)的网站访问该API接口。注意:实际生产环境中,应该根据实际情况设置合适的跨域策略。 相关问题: 1. 除了设置`Access-Control-Allow-Origin`,还有哪些常见的跨域解决方案? 2. Axios支持哪些其他常用的请求方法? 3. 如何处理Axios发送请求时的错误信息?

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值