工作日记（十）：完整项目开发之vue跨域、js发送get与post请求、js中json与字符串的互相转化

2020.7.20

今天继续开发前端vue。

遇到了一个问题：

在前后端分离的情况下，本地启动了前端项目与后端项目后，由于端口不一致的问题，导致前端调用后端接口时报错403，跨域，没有权限访问。

vue跨域解决方法（本地测试时）：

1.可以在后端Controller上加注解，@CrossOrigin，这样后端就支持跨域访问了;

2.在前端vue项目的【项目/vue.config.js】中的"devServer:"标签下，删掉这一句：

before: require('./mock/mock-server.js'),

并且在相同位置增加这一句：

proxy:{
  "/":{
    target: "http://127.0.0.1:8080",  //改为本地项目的端口
    changeOrigin: true  //需要虚拟主机站点
  }
}

3.由于删掉了mock-server.js，因此项目自带登录页面不能使用了（可以显示页面，不过点击登录按钮无法正常登录），需要想办法绕过去。

*4.找到【项目/src/utils/request.js】，找到"service.interceptors.request.use(...)"标签，在这个标签的"config =>{"中增加这一句：

config.headers['content-type'] = 'application/json'

这一步是由于本人想直接使用【项目/src/api/article.js】中的方法，并且报文是以json格式发送的，所以才加上。（直接在article.js中增加headers无效，并且后台没有收到请求头的contentType：application/json会报错。）

5.由于修改了配置文件js，因此需要重启项目。

 

//实际上本人暂时没有成功测试这个方法。

//原因如下：

//本人暂时没有绕过去项目自带的登录页面；这些自测用代码修改后不能提交，自我感觉会搞乱代码；还有其它前端任务没有完成。

//因此本人选择了只记录步骤，然后继续进行前端开发工作。

 

（生产上怎么办到时候再说，不急）

 

vue获取假数据的方法（待完善）：

本人的前端项目，目前在获取数据时都用的假数据（还没人写与后端联调的方法），也就是【项目/src/api/article.js】中的方法，如下：

import request from '@/utils/request'

export function getList(query){
  return request({
    url: '/vue-element-admin/article/list',
    method: 'get',
    params: query
  })
}

export function getDetail(query){
  ......
}

这个方法好像与【项目/mock/article.js】中的方法有关系，就在mock/article.js里写假数据，不过本人还是没搞懂（假数据有中文，但是这个mock里没有中文，嗯......）

 

js发送get请求与post请求（jquery发送ajax）：

发送get请求：

 $.ajax({
        type: "GET",
		async: false,
        url: "http://www.baidu.com",
        data: { 'page': '1', limit: 5 },
        //dataType: "JSON",
		contentType: "application/x-www-form-urlencoded",
        success: function(result) {},
		error: function(result) {}
      });

发送post请求(常用，json)：

var jsonObj = {"id":"test","content":""};	  
$.ajax({
        type: "POST",
		async: false,
        url: "http://www.baidu.com",
        data: JSON.stringify(jsonObj),
		contentType: "application/json",
        success: function(result) {},
		error: function(result) {}
      });
	  

需要注意的点：

1.async，Boolean 类型参数，默认设置为 true，当为 true 表示发送异步请求，当为 false 表示发送同步请求；测试时经常设置为同步（false）。

2. contentType，String 类型参数，当发送信息至服务器时，内容编码类型默认为"application/x-www-form-urlencoded"；一般不设置或者设置为"application/json;charset=utf-8"来发送json格式的数据。

3. dataType，String 类型的参数，指定服务器返回的数据类型；一般不设置。

4.在发送Ajax请求时浏览器会将当前地址添加到要请求的地址前面；需要在请求地址前面加上http请求头（http://）。

5.如果想使用post发送键值对的参数，将第一个例子的【get】改为【post】即可。

js中json与字符串的转化：

字符串转json：

var str1 = "{\"id\":\"1\\n\\r23\",\"content\":\"abc\"}";
var json1 = JSON.parse(str1);
console.log(json1.id);

json转字符串：

var jsonObj = {"id":"test","content":""};
var jsonTxt = JSON.stringify(jsonObj);
console.log(jsonTxt);