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)
blank

相关推荐

  • oracle可以更改表名,sql – 更改Oracle表名

    oracle可以更改表名,sql – 更改Oracle表名我正在尝试在oracle中更改表名.我首先运行此脚本来声明表CREATETABLECUSTOMER(C_IDNUMBER(6,0),C_LASTVARCHAR2(25),C_FIRSTvarchar2(25),C_MIchar(1),C_DOBDATE,C_ADDRESSvarchar2(100),C_CITYvarchar2(35),C_STATEchar(2),C_ZIP…

  • 八图h5怎么发给朋友_最酷h5场景

    八图h5怎么发给朋友_最酷h5场景八图h5提供海量h5模板、邀请函、企业宣传、婚礼、会议会展、求职招聘等场景模板,在线一键生成微信邀请函、八图h5全网邀请函在线制作最优惠平台。  为什么场景化h5影响,能在朋友圈火起来?其实纵观这些能引爆朋友圈的H5,无非有以下特点!  1、会讲故事  h5场景说到底就是个新的页面技术,如何玩转h5,主要还是营销和创意,创意其实就是要会说故事,能把故事说好。h5里面整体故事有…

    2022年10月24日
  • EXTJS AJAX提交带提示框功能实现

    EXTJS AJAX提交带提示框功能实现

  • 组态王系统管理员默认密码_管理没有本地用户和组

    组态王系统管理员默认密码_管理没有本地用户和组用户和组管理a) 用户分类i. 超级用户:root拥有系统最高的管理权限uid=0(root)gid=0(root)组=0(root)ii. 普通用户系统用户:系统自带的拥有特定功能的用户(编号:1-999)本地用户:使用者新建的用户(编号:1000+)iii. 虚拟用户:这些用户通常不用于登录系统,只是用于维持某些服务的正常运行;b) 创建用户命令useradd[选项]用户名或者adduser-ccomment指定一段注释性描述-d目录指定用户家目.

  • 1024,节日快乐!

    1024,节日快乐!每个你不了解的新世界,都值得说一声“Hello,World!”,1024,祝大家节日快乐!少熬夜,多赚钱,护好发!

  • c++钩子函数(react钩子函数)

    结合自定义消息映射方面,作为学习的一个总结.Step1:创建win32动态链接库(anemptyprojectDLL),命名为HookDLL1:增加一个类,命名为DLL.cpp2:增加头文件#include<windows.h>#include"DLL.h"3:创建全局变量#pragmadata_seg("Shared")HHOOKmHoo…

发表回复

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

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