vue-cli教程(五) 網絡請求與跨域問題解決

網絡請求採用jquery，Axios  vue-resource均可以，這裏採用vue-resource

安裝：cnpm install vue-resource

創建server/index.js

import Vue from 'vue'
import vueresource from 'vue-resource'
Vue.use(vueresource);
//以form的形式提交post，若是不加這個參數，在php端須要以 file_get_contents("php://input")獲取參數
Vue.http.options.emulateJSON = true;
const net = {
    BASE_PATH:"/api",
    get_data:function (params) {
        return Vue.http.get(this.BASE_PATH+"/b.php")
    }
};
export default net;

在模板使用：

<template>
    <div>
        <button v-on:click="get_data()">點我獲取內容</button>
    </div>
</template>

<script>
import Net from '../server/index'
export default {
    name:"net",
    methods:{
        get_data:function () {
            const res = Net.get_data(1233);
            res.then(function (data) {
                    console.log(data.data)
                },function (e) {
                    console.log(e)
                }
            )
            res.catch(function (e) {
                console.log("from catch",arguments)
            })
        }
    }
}

</script>

此時點擊獲取時，會出現跨域問題：（js報錯）

XMLHttpRequest cannot load http://localhost/api/b.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. The response had HTTP status code 404.

調試的解決方案：

    在config/index.js 下配置 30 行的 proxyTable

proxyTable: {
    //可配置多個規則
    '/api': {
        target: 'http://localhost',  //服務器端地址
        changeOrigin:true,           //忽略請求的origin
        pathRewrite: {
            '^/api': '/test/api'     //url重寫規則，能夠配置多個
        }
    }
},

    配置成功後重啓 纔會生效 ！！！！！！

在服務器端的解決方案：

     配置nginx反向代理，或者打包後和後端服務器代碼放一塊兒