VUE之axios解决跨域方案

古城微笑少年丶 2022-11-25 10:05 243阅读 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 条评论，243人围观）

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

相关阅读

相关 axios请求“跨域”的解决方案

背景：困扰了好几个小时的问题。启动项目后，页面内容如论如何都不出现，接口没有请求成功。看了一下控制台报了下面错误。 Access to XMLHttpRequ

比眉伴天荒/ 2023年07月12日 03:42/ 0 赞/ 66 阅读

相关 vue跨域解决方案

第一种： proxyTableproxyTable是解决开发环境中的跨域问题，正式环境的跨域需要使用nginx反向代理或者是后端解决 proxyTable: {

短命女/ 2023年06月15日 11:12/ 0 赞/ 50 阅读

相关 vue项目之跨域解决方案

跨域常见解决方案 `jsonp` (项目基本不用) 原理：动态生成script标签，通过src属性加载缺点：不支持POST请求，支持get请求

拼搏现实的明天。/ 2023年03月12日 09:26/ 0 赞/ 46 阅读

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

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

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

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

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

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

相关 VUE之axios解决跨域方案

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

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

相关【VUE axios】axios跨域方式

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

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

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

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

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

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

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

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

相关 vue axios解决跨域

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

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