VUE之axios解决跨域方案

古城微笑少年丶 2022-11-25 10:05 180阅读 0赞

##### 跨域示例 #####

![在这里插入图片描述][20200807172647824.png]  
Access to XMLHttpRequest at ‘xxxx’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

### 解决 ###

--------------------

##### 在vue.config.js中（vue-cli3之后需要自己建） #####

devServer: {
            host: 'localhost',
            port: 8080, // 端口
            https: false,
            proxy: {
                // 配置跨域
    
                '/api': {
                    target: '目标域名 如 http://baidu.com',  // 代理的接口域名以及端口号；
                    ws: true,   // 支持ws协议；websocket的缩写；
                    changeOrigin: true,// 是否跨域
                    pathRewrite: {     // 路径替换
                        '^/api': ''
                    }
                }
            },
            hotOnly: false,
            before: app => { }
        },

##### 接口调用 #####

this.$axios({
          url: "index",
          method: "get",
          params: {},
        }).then((res) => {
          console.log(res);
        });

[20200807172647824.png]: /images/20221124/f0d18bc8aa7e4d2b810beaec556b95af.png

发表评论取消回复

表情：

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

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

相关阅读

相关 Vue---Vue跨域解决方案

vue.config.js vue-cli3及更高版本的脚手架搭建完成后，项目目录中没有 vue.config.js 文件，需要手动创建。vue.config.

青旅半醒/ 2023年02月27日 13:52/ 0 赞/ 84 阅读

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

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

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

相关 vue跨域解决方案（marksheng）

可以在Vue项目 config文件夹下的index.js找到proxyTable并设置如下代码 proxyTable: { "/api":{

爱被打了一巴掌/ 2023年01月03日 01:21/ 0 赞/ 86 阅读

相关 VUE之axios解决跨域方案

跨域示例 ![在这里插入图片描述][20200807172647824.png] Access to XMLHttpRequest at ‘xxxx’ from or

古城微笑少年丶/ 2022年11月25日 10:05/ 0 赞/ 181 阅读

相关【VUE axios】axios跨域方式

1、配置config下的index.js proxyTable: { '/apis': { target: '

爱被打了一巴掌/ 2022年05月19日 06:55/ 0 赞/ 288 阅读

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

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

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

相关前端跨域解决方案(vue/nginx)

一、vue 之前解决跨域问题，分别都是在前端加上一些header头，后端设置一些access...的信息，允许固定ip或者所有的请求，但还没有全部在前端搞定的方案，最近在用v

落日映苍穹つ/ 2022年01月27日 10:01/ 0 赞/ 294 阅读

相关 vue axios + Java 跨域

1.在 vue main.js 的里面 import axios from 'axios'//引入axios,来发送请求 Vue.prototype.axios

女爷i/ 2022年01月22日 00:45/ 0 赞/ 279 阅读

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

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

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

相关 vue axios解决跨域

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

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