前端mock資料，跨域處理

前端模擬資料，我時自己引入乙個後端koa外掛程式，自己讓後端設定資料，傳送乙個api給前端

用的是 react+webpack框架

首先後端建立資料 

npm i koa koa-router -d

建立乙個server服務

server.js

var router = require('koa-router')();

router.get('/', function *(next) );

router.get('/api', function *(next) );

router.get('/api/1', function *(next) );

router.get('/api/2', function *(next)

}); .use(router.allowedmethods());

然後用node 路徑/server.js 開始koa後端

後端服務開啟成功

所以現在後端提供了幾個api，拿/api/1 和/api/2來測試

這裡我們需要用到webpack-dev-server這個外掛程式，它可以為後端提供乙個**服務

npm i webpack webpack-dev-server -d

module.exports = }}

}

http://localhost:3000

現在可以來讓前端接收資料了

首先我們需要安裝兩個外掛程式 npm i fetch es6-promise -s

接著我們建立乙個get方法

get.js

import 'whatwg-fetch'

import 'es6-promise'
export function get(url) 
});return result;
}

import  from './get.js'

export function getdata() ).then(text => )
var result2 = get('/api/2')
result2.then(res => ).then(json => )
}

import react from 'react'

import from 'react-dom'
import from 'react-redux'
import configurestore from './store/configurestore'
// import hello from './containers/hello';
import tdd from './containers/tdd'
const store = configurestore()
// 測試fetch的功能
看埠號 8080 呼叫，證明成功
 
vue 前端設定允許跨域 Vue前端處理跨域
之前的跨域都是後台來解決，因為前端方便的解決方式只有jsonp，但是jsonp只能用於get請求，所以最好的方式只能是後台了 但現在不行了，後台讓前端解決，原因是後期 部署後就不會存在跨域問題了，後台不解決 那就前端唄。1 在config index.js檔案下，由於只有開發環境才會遇到跨域問題，所...
vue前端處理跨域問題 axios
main.js 在main.js檔案中引入axios import vue from vue step1 引入 axios import axios from axios vue.config.productiontip false step2 把axios掛載到vue的原型中，在vue中每個元件都...
js跨域 ajax跨域 跨域方式（前端）
跨域方式 cors 跨域資源共享 當使用xmlhttprequest傳送請求時，瀏覽器會自動加上乙個請求頭 origin,後端在接受到請求後確定響應後會在response headers中加入乙個屬性 access control allow origin,值就是發起請求的源位址 瀏覽器得到響應會進...