vue跨域解决方案 简书_vueaxios跨域请求

vue跨域解决方案 简书_vueaxios跨域请求vue解决跨域问题vue跨域解决方法和小总结vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No’Access-Control-Allow-Origin’headerispresentontherequestedresource.”这种跨域错误。要想本地正常的调试,解决的办法有三个:一、后台更改headerheader(‘A…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

vue解决跨域问题

vue跨域解决方法和小总结

vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No ‘Access-Control-Allow-Origin’ header is present on the requested resource.” 这种跨域错误。

vue跨域解决方案 简书_vueaxios跨域请求

要想本地正常的调试,解决的办法有三个:

一、后台更改header

header(‘Access-Control-Allow-Origin:*’);//允许所有来源访问

header(‘Access-Control-Allow-Method:POST,GET’);//允许访问的方式

这样就可以跨域请求数据了。

二、使用JQuery提供的jsonp  (注:vue中引入jquery,自行百度)

methods: {

getData () {

var self = this

$.ajax({

url: ‘http://f.apiplus.cn/bj11x5.json’,

type: ‘GET’,

dataType: ‘JSONP’,

success: function (res) {

self.data = res.data.slice(0, 3)

self.opencode = res.data[0].opencode.split(‘,’)

}

})

}

}

通过这种方法也可以解决跨域的问题。

三、使用http-proxy-middleware 代理解决(项目使用vue-cli脚手架搭建)

1、打开config/index.js,在proxyTable中添写如下代码:

proxyTable: {

‘/api’: { //使用”/api”来代替”http://f.apiplus.c”

target: ‘http://f.apiplus.cn’, //源地址

changeOrigin: true, //改变源

pathRewrite: {

‘^/api’: ‘http://f.apiplus.cn’ //路径重写

}

}}

2、使用axios请求数据时直接使用“/api”:

getData () {

axios.get(‘/api/bj11x5.json’, function (res) {

console.log(res)

})

通过这中方法去解决跨域,打包部署时还按这种方法会出问题。解决方法如下:

let serverUrl = ‘/api/’ //本地调试时

// let serverUrl = ‘http://f.apiplus.cn/’ //打包部署上线时

export default {

dataUrl: serverUrl + ‘bj11x5.json’

}

调试时定义一个serverUrl来替换我们的“/api”,最后打包时,只需要将“http://www.xxx.com”替换这个“/api”就可以了。

参考资源:https://www.cnblogs.com/wangyongcun/

作者:wangyongcun

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/192483.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 利用tasklist和taskkill实现判断进程数按名称杀掉进程

    利用tasklist和taskkill实现判断进程数按名称杀掉进程@echooffsetexe=firefox.exeset/anum=5for/f%%iin(‘tasklist^|find/c/i”%exe%”‘)doif%%igtr%num%taskkill/f/im%exe%TASKKILL[/Ssystem[/Uusername[/P[password]]]]{[/FIfilter][/PIDprocessid|/IMimagename]}[/T][/F]描述:使用该工具按

  • 如果我说熟悉SpringBoot 面试官会怎么问?

    如果我说熟悉SpringBoot 面试官会怎么问?SpringBoot因简化了Spring框架使用难度,极大地提高了Java企业级应用开发的效率,成为企业考核人才的重要标准之一。但随着现今互联网行业快速发展、企业业务不断深入,相应地对SpringBoot技术要求也愈来愈高。春节时期有一位打算金三银四面试的读者私信问我:如果我说熟悉SpringBoot面试官会怎么问?​可能不少朋友跟他一样,不清楚当下企业真实生产环境下对SpringBoot有哪些具体要求,需要掌握到什么程度。为此,结合这些年的面试经历及各大厂的职位要求,给

  • linux下杀死某个进程_shell脚本获取进程号并杀死进程

    linux下杀死某个进程_shell脚本获取进程号并杀死进程在做项目的时候经常会出现程序死机、锁死、无响应等情况,这时候就需要找到程序相应的进程将其杀掉即可。步骤如下:1.定位进程top命令:可以实时动态地查看系统的整体运行情况,是一个综合了多方信息监测系统性能和运行信息的实用工具。通过top命令所提供的互动式界面,用热键可以管理。输入top后可以看到如下的界面,实时显示进程情况。ps命令:processstatus的简称,用于报告当…

  • Java设计模式简介(一):创建型模式

    Java设计模式简介(一):创建型模式

  • vim怎么显示行号_vim型号

    vim怎么显示行号_vim型号1、临时使用  1、进入viorvim编辑环境下,进入命令行模式,然后输入setnumber,就可以显示行号了。如图:      2、输入setnonumber关闭行号      3、通过如上设置只能临时起作用,当你打开另外一个文件时我们的行号又没有了,所以接下来我们去永久配置一下吧。2、永久使用在/etc/vimrc(/etc/virc)文件中修改一下就ok了,在文件末尾加…

    2022年10月31日
  • 在docker 上安装lnmp 环境

    在docker 上安装lnmp 环境

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号