最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

vue項(xiàng)目打包發(fā)布后接口報(bào)405錯(cuò)誤的解決

 更新時(shí)間:2022年07月21日 08:41:31   作者:weixin_42083023  
這篇文章主要介紹了vue項(xiàng)目打包發(fā)布后接口報(bào)405錯(cuò)誤的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue項(xiàng)目打包發(fā)布后接口報(bào)405

vue項(xiàng)目前端做了代理打包后后臺(tái)不識(shí)別報(bào)405 not allowed

vue.config.js文件配置

? devServer: {
? ? // host: "0.0.0.0", //項(xiàng)目運(yùn)行時(shí)的本地地址
? ? // port: 8880, // 端口號(hào)
? ? //proxy:{'/api':{}},代理器中設(shè)置/api,項(xiàng)目中請(qǐng)求路徑為/api的替換為target
? ? proxy: {
? ? ? '/api': {
? ? ? ? // target: "http://192.168.0.249:19029",//代理地址,這里設(shè)置的地址會(huì)代替axios中設(shè)置的baseURL
? ? ? ? target: process.env.VUE_APP_BASEURL_API,//代理地址,這里設(shè)置的地址會(huì)代替axios中設(shè)置的baseURL
? ? ? ? changeOrigin: true,// 如果接口跨域,需要進(jìn)行這個(gè)參數(shù)配置
? ? ? ? //ws: true, // proxy websockets
? ? ? ? //pathRewrite方法重寫url
? ? ? ? pathRewrite: {
? ? ? ? ? '^/api': "/"
? ? ? ? ? //pathRewrite: {'^/api': '/'} 重寫之后url為 http://192.168.1.16:8085/xxxx
? ? ? ? ? //pathRewrite: {'^/api': '/api'} 重寫之后url為 http://192.168.1.16:8085/api/xxxx
? ? ? ? },
? ? },
? ? https: false, // https:{type:Boolean}
? ? disableHostCheck: true,
? ? open: true, //配置自動(dòng)啟動(dòng)瀏覽器
? },

default.conf文件配置

server {
? ? listen ? ? ? 9000;
? ? server_name ?localhost;
? ? #charset koi8-r;
? ? #access_log ?/var/log/nginx/log/host.access.log ?main;
? ? location / {
? ? ? ? root ? /usr/share/nginx/html;
? ? ? ? index ?index.html index.htm;
? ? ? ? try_files ?$uri $uri/ ?@router;
? ? }
? ? location /api {
? ? ? ?rewrite ^/api/$ ?permanent;
? ? ? ?proxy_pass http://192.168.0.253:30001/warehouse/;
? ? ? ?proxy_redirect default;
? ? ? ?proxy_set_header Host $host;
? ? ? ?proxy_set_header X-Real-IP $remote_addr;
? ? ? ?proxy_set_header REMOTE-HOST $remote_addr;
? ? ? ?proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
? ? }
? ? #error_page ?404 ? ? ? ? ? ? ?/404.html;
? ? # redirect server error pages to the static page /50x.html
? ? #
? ? error_page ? 500 502 503 504 ?/50x.html;
? ? location = /50x.html {
? ? ? ? root ? html;
? ? }
? ? # proxy the PHP scripts to Apache listening on 127.0.0.1:80
? ? #
? ??
? ? #location ~ \.php$ {
? ? # ? ?proxy_pass ? http://127.0.0.1;
? ? #}
?# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
? ? #
? ? #location ~ \.php$ {
? ? # ? ?root ? ? ? ? ? html;
? ? # ? ?fastcgi_pass ? 127.0.0.1:9000;
? ? # ? ?fastcgi_index ?index.php;
? ? # ? ?fastcgi_param ?SCRIPT_FILENAME ?/scripts$fastcgi_script_name;
? ? # ? ?include ? ? ? ?fastcgi_params;
? ? #}
? ? location @router {
? ? ? ? rewrite ^.*$ /index.html last;
? ? }
? ? # deny access to .htaccess files, if Apache's document root
? ? # concurs with nginx's one
? ? #
? ? #location ~ /\.ht {
? ? # ? ?deny ?all;
? ? #}
}

vue項(xiàng)目打包之后接口出現(xiàn)錯(cuò)誤問題

錯(cuò)誤信息

這是新建一個(gè)項(xiàng)目還原問題,node簡(jiǎn)單寫了個(gè)數(shù)據(jù)返回

關(guān)鍵代碼

const express = require('express')
const app = express();
// 解決跨域問題
app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    next();
})
// 調(diào)用接口直接返回一個(gè)數(shù)組
app.get('/getData', (req, res) => {
    res.send([
    	{
            id: 1,
            name: 'GAI'
        },
        {
            id: 2,
            name: 'keyNg'
        },
        {
            id: 3,
            name: '閃火'
        }
    ])
})
// api/index.js
import axios from 'axios'
export function getData() {
    return axios({
        url: 'api/getData',
        method: 'get'
    })
}
// home.vue
mounted() { 
   getData().then(res => {
     console.log(res);
   })
},

打包前

打包后

解決方式

設(shè)置環(huán)境變量

引用一句官網(wǎng)原話

請(qǐng)注意,只有 NODE_ENV,BASE_URL 和以 VUE_APP_ 開頭的變量將通過 webpack.DefinePlugin 靜態(tài)地嵌入到客戶端側(cè)的代碼中。這是為了避免意外公開機(jī)器上可能具有相同名稱的私鑰。

1.根目錄新增.env.development文件(會(huì)在開發(fā)環(huán)境被載入)

// .env.development
VUE_APP_TITLE = '溫情dev'
VUE_APP_ENV = 'dev'
VUE_APP_BASE_URL = 'http://localhost:3000'

2.根目錄新增.env.production文件(會(huì)在生產(chǎn)環(huán)境被載入)

// .env.production
VUE_APP_TITLE = '溫情pro'
VUE_APP_ENV = 'pro'
VUE_APP_BASE_URL = 'http://localhost:3000'

3.改一下 axios 請(qǐng)求方法

// api/index
// 這里只是簡(jiǎn)單解決一下問題
// 重點(diǎn)就是把開發(fā)環(huán)境和生產(chǎn)環(huán)境請(qǐng)求地址區(qū)分開來就可以了, 根據(jù)實(shí)際情況自行改動(dòng)
import axios from 'axios'
let baseURL = '';
// process.env.VUE_APP_ENV拿到我們?cè)谇懊嬖O(shè)置的模式,
// 如果現(xiàn)在是開發(fā)環(huán)境會(huì)使用`.env.development`里面設(shè)置的環(huán)境變量等于`dev`
// 如果現(xiàn)在是生產(chǎn)環(huán)境會(huì)使用`.env.production`里面設(shè)置的環(huán)境變量等于`pro`
if(process.env.VUE_APP_ENV === 'dev') {
? ? baseURL = '/api';
} else {
? ? baseURL = process.env.VUE_APP_BASE_URL
}
export function getData() {
? ? return axios({
? ? ? ? url: `${baseURL}/getData`,
? ? ? ? method: 'get'
? ? })
}

小提示: .env.development和.env.production文件修改之后記得重新跑一下項(xiàng)目

總結(jié):區(qū)分開發(fā)模式 

以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • Luckysheet?在vue中離線使用及引入報(bào)錯(cuò)的解決方案(推薦)

    Luckysheet?在vue中離線使用及引入報(bào)錯(cuò)的解決方案(推薦)

    這篇文章主要介紹了Luckysheet?在vue中離線使用方法及引入報(bào)錯(cuò)的解決方案,將dist離線包在項(xiàng)目創(chuàng)建個(gè)文件夾放著,然后根據(jù)放置的位置在?index.html里面引入,下面通過案例給大家介紹我的項(xiàng)目里面放置的位置,需要的朋友可以參考下
    2022-10-10
  • vue中三種調(diào)用接口的方法

    vue中三種調(diào)用接口的方法

    這篇文章主要介紹了vue中三種調(diào)用接口的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • 在vue2.0中引用element-ui組件庫的方法

    在vue2.0中引用element-ui組件庫的方法

    這篇文章主要介紹了在vue2.0中引用element-ui組件庫,需要的朋友可以參考下
    2018-06-06
  • Vue3 composition API實(shí)現(xiàn)邏輯復(fù)用的方法

    Vue3 composition API實(shí)現(xiàn)邏輯復(fù)用的方法

    本文主要介紹了Vue3 composition API實(shí)現(xiàn)邏輯復(fù)用的方法,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-08-08
  • 使用Vue CLI創(chuàng)建typescript項(xiàng)目的方法

    使用Vue CLI創(chuàng)建typescript項(xiàng)目的方法

    這篇文章主要介紹了使用Vue CLI創(chuàng)建typescript項(xiàng)目的方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-08-08
  • vue移動(dòng)端自適應(yīng)適配問題詳解

    vue移動(dòng)端自適應(yīng)適配問題詳解

    這篇文章主要介紹了vue移動(dòng)端自適應(yīng)適配問題,本文通過實(shí)例代碼詳解給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2021-04-04
  • Vue中.prettierrc文件的常見配置(淺顯易懂)

    Vue中.prettierrc文件的常見配置(淺顯易懂)

    這篇文章主要介紹了Vue中.prettierrc文件的常見配置,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-07-07
  • Vue中一個(gè)組件調(diào)用其他組件的方法詳解(非父子組件)

    Vue中一個(gè)組件調(diào)用其他組件的方法詳解(非父子組件)

    vue中最常見子父組件產(chǎn)值,大家一定都很熟悉,最近項(xiàng)目中碰到非父組件中調(diào)用子組件方法的問題,這篇文章主要給大家介紹了關(guān)于Vue中一個(gè)組件調(diào)用其他組件的方法(非父子組件),需要的朋友可以參考下
    2022-10-10
  • Vue實(shí)現(xiàn)簡(jiǎn)單計(jì)算器

    Vue實(shí)現(xiàn)簡(jiǎn)單計(jì)算器

    這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡(jiǎn)單計(jì)算器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-01-01
  • vue歌曲進(jìn)度條示例代碼

    vue歌曲進(jìn)度條示例代碼

    這篇文章主要介紹了vue歌曲進(jìn)度條demo,本文通過示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2021-10-10

最新評(píng)論

阿拉善右旗| 潜江市| 靖江市| 五寨县| 荥阳市| 嘉禾县| 巫山县| 阿克苏市| 上犹县| 花莲县| 湖州市| 策勒县| 盐源县| 阿坝| 壤塘县| 阜阳市| 青海省| 宜州市| 连山| 安阳市| 龙海市| 苏尼特左旗| 科技| 项城市| 阿鲁科尔沁旗| 建水县| 巴马| 兴安县| 堆龙德庆县| 曲沃县| 抚顺县| 霸州市| 东丽区| 新竹县| 石泉县| 松溪县| 耒阳市| 安吉县| 祁东县| 惠水县| 连山|