fetch跨域实现及post传参问题

fetch跨域有两种方法:

1.前端jsonp跨域

2.后端设置cors跨域

首先,尝试了jsonp跨域,可以轻松成功连接上豆瓣API

引入包 fetch-jsonp

try{
        const url = `https://api.douban.com/v2/book/search?q=${searchName}&count=20`;
        yield put(fetchBooks())
        const res = yield call( fetchJsonp, url )
        const data = yield res.json().then(res=>(res))
        console.log(data)
        yield put(fetchBooksSuccess(data))
        console.log('load成功')
    }catch(e){
        console.log(e);
        yield put(fetchBooksError())
    }
           

很棒!!  于是自己开始搭建node服务, 开始出bug了

(1)请求后端时候遇上请求有响应但是 报错time out的bug, 参照了官网没法解决( 后台不支持jsonp ??? ).

(2)请求的json数据无法解析,提示语法错误 ???

参考了官方解释,仍旧一头雾水 

Caveats

1. You need to call 

.then(function(response) { return response.json(); })

 in order to keep consistent with Fetch API.

2. 

Uncaught SyntaxError: Unexpected token :

 error

More than likely, you are calling a JSON api, which does not support JSONP. The difference is that JSON api responds with an object like 

{"data": 123}

 and will throw the error above when being executed as a function. On the other hand, JSONP will respond with a function wrapped object like 

jsonp_123132({data: 123})

.

故此暂且放弃jsonp方法~~~~~~

后台设置cors跨域

//设置跨域

app.all('*', function(req, res, next) {

res.header("Access-Control-Allow-Origin", "*");

res.header("Access-Control-Allow-Headers", "X-Requested-With");

res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");

res.header("X-Powered-By",' 3.2.1')

res.header("Content-Type", "application/json;charset=utf-8");

next();

});
           

此段代码加入之后 , 前台就可以正常访问后台服务器了 , 使用get方法加上url字符串拼接轻松实现与后台交互

接着又出现了新的问题----当使用post与后台交互的时候, 如何实现传参 ? 参考了网上的几种方式 1.body:JSON.stringify(obj) 2.formData

试验过后formData方式不可用, 第一种方法可以使用,但是要加上

"Content-type":'application/x-www-form-urlencoded'
           

下面贴出实现代码:

get:

fetchLogin(values){

    let url = 'http://localhost:8080？name='+values.username+'&password='+values.password

    fetch(url).then((res) => {

        console.log(res)

        return res.json()

    }).then((data)=>{

        console.log(data)
        
    }).catch((err) => {

        console.log(err)

    })

}
           

post

fetchLogin2(values){

    let url = 'http://localhost:8080/register'

    let obj = { name:values.username2,password:values.password2 }

    fetch(url,{

        method:'post',

        headers:{

            "Content-type":'application/x-www-form-urlencoded'

        },

        body:`data=${JSON.stringify(obj)}`

    }).then((res) => {

        console.log(res)

        return res.json()

    }).then((data)=>{

        console.log(data)

    }).catch((err) => {

        console.log(err)

    })

}