关于跨域的记录

前言：
关于跨域之前很少遇到，偶尔写demo调用豆瓣api遇到过，最近疯狂遭遇，头痛不已啊，虽然熟记的同源策略（同端口，同协议，同域名），及JSONP。

	//后端java设置允许跨域
	  response.setHeader("Access-Control-Allow-Origin", "*");
      response.setHeader("Access-Control-Allow-Headers", "X-Requested-With,content-type,token");
      response.setHeader("Access-Control-Allow-Methods", "GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH");

react情况一：

//前后台代码都在一个服务器
//使用ant-design-pro，在.webpackrc文件追加
 "proxy": {
    "/": {
      "target": "https://xxxx.cn",//http://192.168.13.149:8006 ----- https://xxxx.cn
      "changeOrigin": true,
      "pathRewrite": { "^/" : "" }
    }
  }

react情况二：

//前后台代码不在一个服务器
//使用ant-design-pro，修改api.js文件
//后台做了跨域配置，当时一直报跨域，请教大神说复杂跨域使用withCredentials: true解决
export async function  getEmailListApi(params) {
  return request(API+'/xxxx', { //api是域名，全局变量
    method: 'POST',
    body: params,
    withCredentials: true,//加上这个就好了，后来又发现，加不加都能访问？？？匪夷所思
  });
}

react情况三：

//前后台代码都在一个服务器
//使用ant-design-pro
//后台做了跨域配置，其他接口正常访问，只有导出Excel报跨域（使用blob，前端接收文件流）

前端无需修改，java需要单独为导出接口设置跨域，文件流会重置全局设置，在接口内部在设置跨域。

vue情况一：

//使用vue+vue-resource,使用cdn引入的
//加上withCredentials：true;解决
let that = this
that.$http.post(url+'/s/subregion/getRegionListByReCode',{regionid:that.regionCode},{headers:{'Content-Type':'application/json;charset=utf-8'},withCredentials: true},{emulateJSON: true})
						.then(res => {
							if(res.data.code == 1000){
								that.subregion = res.data.data
							}
						}, response => {
							console.log("error");
						});

vue情况二：

//使用vue+vue-resource,使用cdn引入的
//同一个项目上传图片时，必须改withCredentials：false;解决
let that = this
that.$http.post(url+'/www/upload',formData,{headers:{'Content-Type':'multipart/form-data'},withCredentials: false},{emulateJSON: true})
						.then(res => {
								console.log('data',res.bodyText ,that[currentData[current]]);
							that[currentData[current]].push(res.bodyText);
								console.log('选择',that[currentData[current]] ,current)
							//that.imgList = [];
							//that.showUpPop = false;
							formData.delete('files');
								
						}, response => {
								console.log("error");
						});

游戏篇：吃鸡我手机预留5G，更新不上，内存不够，赶上王者更新，我只能弃车保帅。什么都能删，王者不能删。等我换手机，吃鸡再回来吧。

猜你喜欢