前言

我們提供的服務(wù)有：成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、楊浦ssl等。為成百上千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的楊浦網(wǎng)站制作公司

我們在使用vue-cli啟動(dòng)項(xiàng)目的時(shí)候npm run dev便可以啟動(dòng)我們的項(xiàng)目了，通常我們的請求地址是以localhost:8080來請求接口數(shù)據(jù)的，localhost是沒有辦法設(shè)置cookie的。

我們可以在vue-cli配置文件里面設(shè)置一個(gè)代理，跨域的方法有很多，通常需要后臺(tái)來進(jìn)行配置。我們可以直接通過node.js代理服務(wù)器來實(shí)現(xiàn)跨域請求。

vue proxyTable接口跨域請求調(diào)試

在vue-cli項(xiàng)目中的config文件夾下的index.js配置文件中，dev長這樣子：

dev: {
  env: require('./dev.env'),
  port: 8080,
  autoOpenBrowser: true,
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  proxyTable: {},  
  cssSourceMap: false
 }

服務(wù)器提供的接口如果長這樣https://www.exaple.com/server_new/login，我們把域名提取出來如https://www.exaple.com；

在config中新建一個(gè)文件命名為proxyConfig.js :

module.exports = {
 proxy: {
    '/apis': {  //將www.exaple.com印射為/apis
      target: 'https://www.exaple.com', // 接口域名
      changeOrigin: true, //是否跨域
      pathRewrite: {
        '^/apis': ''  //需要rewrite的,
      }       
    }
 }
}

config文件夾下的index.js引入proxyConfig.js：

var proxyConfig = require('./proxyConfig')

config文件夾下的index.js中的dev改成:

dev: {
  env: require('./dev.env'),
  port: 8080,
  autoOpenBrowser: true,
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  proxyTable: proxyConfig.proxy,
  cssSourceMap: false
 }

重啟項(xiàng)目npm run dev：

你會(huì)發(fā)現(xiàn)出現(xiàn)了這個(gè)

這個(gè)時(shí)候我們已經(jīng)設(shè)置好了本地API代理了

修改本地hosts文件

文件路徑一般是C:\Window\System32\drivers\etc，打開hosts文件，在這一段下面把localhost設(shè)置進(jìn)去

# localhost name resolution is handled within DNS itself.
# 127.0.0.1    localhost
# ::1       localhost
127.0.0.1          activate.adobe.com
127.0.0.1          practivate.adobe.com
127.0.0.1          lmlicenses.wip4.adobe.com
127.0.0.1          lm.licenses.adobe.com
127.0.0.1          na1r.services.adobe.com
127.0.0.1          hlrcv.stage.adobe.com

localhost          www.exaple.com    

搞定

此時(shí)我們已經(jīng)完全解決了跨域問題，以及本地測試后臺(tái)無法向我們本地環(huán)境設(shè)置cookie的情況了。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

網(wǎng)站標(biāo)題：詳解vue-cli本地環(huán)境API代理設(shè)置和解決跨域
URL地址：http://www.rwnh.cn/article14/jishde.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、定制網(wǎng)站、小程序開發(fā)、網(wǎng)站設(shè)計(jì)、用戶體驗(yàn)、品牌網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)