vue-cli3使用axios解决跨域问题

阳光穿透心脏的1/2处 2023-06-25 03:30 2阅读 0赞

一、安装axios

npm install axios

二、main.js中

import axios from 'axios';
    Vue.prototype.$axios = axios;
    axios.defaults.baseURL = '/api';
    axios.defaults.headers.post['Content-Type'] = 'application/json';

三、vue.config.js

module.exports={
        devServer:{
            proxy:{
                '/api': {
                    //target后面的url是自己服务器的url，我访问的是.NET服务器的地址，
                    //如果没有地址可以访问百度、淘宝等
                    target: 'https://localhost:44340/AXIOS/Axios.aspx',
                    // 允许跨域
                    changeOrigin: true,
                    ws: true,
                    pathRewrite: {
                        '^/api': ''
                    }
                }
            }
        }
    }

四、向服务器发出请求

this.$axios.post('/').then(res => {
    	//ax是我自定义的变量，在服务器页面中输出url，这样响应的数据中就有url了
        this.ax = res.data.ax;
        console.log(this.ax);
    }).catch(err => {
        console.log("请求失败！",err);
    })

五、使用fetch函数发送跨域请求

fetch(this.ax.loginurl,{
        method:'post',
        mode:'cors',
        body:'username='+this.username+"&password="+this.password,
        headers: new Headers({
                'Content-Type': 'application/x-www-form-urlencoded'
        })
    }).then(res => {
        if(res.ok){
            res.json().then(data => {
                console.log(data);
            });
        }
    });

发表评论取消回复

表情：

评论列表（有 0 条评论，2人围观）

还没有评论，来说两句吧...

相关阅读

相关 Axios使用代理解决后端跨域问题

1. 将axios 拦截器中的baseURL 替换成\`/api\`![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aH

秒速五厘米/ 2023年06月30日 02:45/ 0 赞/ 37 阅读

相关 vue-cli3使用axios解决跨域问题

一、安装axios npm install axios 二、main.js中 import axios from 'axios'; Vue.pro

阳光穿透心脏的1/2处/ 2023年06月25日 03:30/ 0 赞/ 3 阅读

相关解决Axios跨域问题（Axios跨域问题解决方案）

问题背景 Axios是不允许跨域访问的，别说跨域，跨端口都不行。例如某项目我本地vue前端frontEnd为`localhost:8889`，Java后台 backEnd

以你之姓@/ 2023年02月25日 08:38/ 0 赞/ 79 阅读

相关 vue前端解决跨域问题（axios）

vue前端解决跨域问题（axios） 1、安装环境 2、配置代理 1.在config文件夹下的index.js文件中的proxyTable字段中，

朴灿烈づ我的快乐病毒、/ 2023年02月18日 01:57/ 0 赞/ 174 阅读

相关 React Axios 请求解决跨域问题

网上看了很多的方案，但是不知道为什么，作为初学者，对react不太清楚的话，解决跨域还是有很多的问题。这篇博客针对小白，第一次调试react 跨域问题，甚至第一次使用Axios

秒速五厘米/ 2022年09月10日 02:29/ 0 赞/ 382 阅读

相关 Vue使用axios、解决axios跨域

axios [axios文档][axios] > axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端从浏览器中创建 XML

骑猪看日落/ 2022年03月06日 10:38/ 0 赞/ 685 阅读

相关前后分离---axios解决跨域问题

统一用户平台接口调整修改谈到跨域，首先得了解CORS（Cross origin resource sharing）跨域资源共享，它是w3c的一个标准，是一份浏

末蓝、/ 2021年11月16日 17:10/ 0 赞/ 531 阅读

相关 Vue-cli3之axios跨域问题解决方案（客户端跨域）

最权威的配置参考官方文档：[https://cli.vuejs.org/zh/config/][https_cli.vuejs.org_zh_config] vue.

浅浅的花香味﹌/ 2021年09月17日 18:38/ 0 赞/ 423 阅读

相关 Vuecli3+express实现跨域

目录一，本地跨域二，线上跨域 -------------------- 一，本地跨域首先，本地服务器地址开放的是3000端口，云服务器上开发的是4

阳光穿透心脏的1/2处/ 2021年07月25日 17:22/ 0 赞/ 731 阅读

相关 vue axios解决跨域

axios解决跨域 1、在config中的index.js文件中将proxyTable后的内容修改为:

阳光穿透心脏的1/2处/ 2021年07月24日 12:46/ 0 赞/ 547 阅读