快捷導(dǎo)航

vue3解決跨域問題詳細(xì)代碼親測有效

更新時間：2022年11月14日 11:40:27 作者：會飛的豬@

跨域，跨的是不同域，也就是協(xié)議或主機(jī)或或端口號不同造成的現(xiàn)象，本文給大家分享vue3解決跨域問題詳細(xì)代碼親測有效，感興趣的朋友跟隨小編一起看看吧

vue3解決跨域問題詳細(xì)代碼親測有效

1.在vue.config.js中放入以下代碼：

module.exports = {

    devServer: {

        proxy: {

            '/api': {

                target: 'http://api.tubecoin.org', //這里填入你要請求的接口的前綴

               ws: true, //代理websocked

              changeOrigin: true, //虛擬的站點(diǎn)需要更換origin

         secure: true, //是否https接口，我用的http但是我變成false他打包后會報錯，所以先true

                pathRewrite: {

                    '^/api': ''     //重寫路徑

                }

            }

        }

    }

}

2. 需要寫接口的頁面引入：

import Axios from "axios";

Axios.defaults.baseURL = "/api";

3.頁面中的方法：

   Axios({

          method: "post", //接口方法

          url: "/register/register", //接口

          params: {        //需要傳的參數(shù)

            username: obj.name,

            phone: obj.phone,

            sms_code: obj.code,

          },

        }).then((res) => {

          console.log(res, "55555");

          ElMessage(resp.data.message);  //這個是引入的element plus中的提示框

        });

關(guān)于解決vue3的跨域問題

項(xiàng)目場景：

提示：這里簡述項(xiàng)目相關(guān)背景：

當(dāng)我們使用vue3搭建前后端分離項(xiàng)目時，往往會出現(xiàn)跨域問題。前端往往會提示：

在這里插入圖片描述

原因分析：

例如，我這里，前端的項(xiàng)目的請求地址是http://localhost:8085/，訪問后端的接口為http://localhost:8081/ResourcesCenter/BaseMapStyle/selectByPage，由于端口的不一致，所以出現(xiàn)了跨域問題。

解決方案：

第一步：找到vue.config.js文件，添加如下代碼：

module.exports = {
  devServer: {
    open: true,
    host: 'localhost',
    port: 8085,
    //這里的ip和端口是前端項(xiàng)目的;下面為需要跨域訪問后端項(xiàng)目
    proxy: {
      '/ResourcesCenter': {
        target: 'http://localhost:8081/ResourcesCenter/',//這里填入你要請求的接口的前綴
        ws:true,//代理websocked
        changeOrigin:true,//虛擬的站點(diǎn)需要更管origin
        secure: true,                   //是否https接口
        pathRewrite:{
          '^/ResourcesCenter':''//重寫路徑
        },
        headers: {
          referer: 'http://localhost:8081/ResourcesCenter/', //這里后端做了拒絕策略限制，請求頭必須攜帶referer，否則無法訪問后臺
        }
      }
    }
  }
}

第二步，就是如何調(diào)用了

 selectByPage(pageSize, pageNum, keyword) {
        return axios.get('/ResourcesCenter/BaseMapStyle/selectByPage?almanacName='+keyword+'&pageSize='+pageSize+'&pageNum='+pageNum,
            // {
            //     params:{
            //         almanacName:keyword,
            //         pageSize:pageSize,
            //         pageNum:pageNum
            //     }
            // },
            /*' {headers: {\'Content-Type\': \'application/json;charset=UTF-8\'}}'*/)
    }

在這里插入圖片描述