dva api调用,proxy代理配置解决跨域问题
proxy代理解决跨域问题
(一)什么是跨域
JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象。当协议、子域名、主域名、端口号中
任意一个不相同时,都算作不同域。不同域之间相互请求资源,就算作“跨域”。
同源就是指“协议+域名+端口”都一样,就算有两个不同域名指向同一个IP地址也不能是同源。同源策略只有在浏览器中存在,服务器中确不存在,所以遇到需要跨域请求的地址将其转发服务器后委托服务器去请求即可。
找到.webpackrc文件进行配置。
{
"proxy":{
"/apis": {
"target":"https://cnodejs.org",
"changeOrigin": true,//创建虚拟服务器,changeOrigin默认是false:请求头中host仍然是浏览器发送过来的host,如果设置成true:发送请求头中host会设置成target·
"pathRewrite": {"^/apis": "" } //路径替换
}
}
}
配置接口 例如在service/example目录下
import request from '../utils/request';
const proxy = '/apis'
export function testApi() {
return request(proxy+'/api/v1/topics');
}
调用接口
import React from 'react';
import {connect} from "dva";
import * as apis from '../services/example'
class IndexPage extends React.Component{
componentDidMount() {
apis.testApi().then(res => {
console.log(333,res);
})
}
。。。。。。。省略下面代码
打印结果