node.js vue 遇到的坑杂记

首先我是为了我们gm工具写的网页，我个人而言也是一个后端程序员，所以不考虑任何好看相关，要求就是在火狐或谷歌浏览器上能用就行。虽然vue支持的很好。

已拦截跨源请求:同源策略禁止读取位于 XXXX 的远程资源。(原因:CORS 头缺少 'Access-Control-Allow-Origin')。

这个错误是：网页地址，和ajax请求的地址不一致就会报这个错误。解决方式为，我没解决，用了nginx代理，把地址整合为一个，都一个地址了，自然不会报这个错误。

nginx代理本地端口

       原来nginx目录下的conf/nginx.conf的内容，原本的部分

location / {
    root   html;
    index  index.html index.htm;
}

改为就相当于代理了3000端口的服务

location / {
     proxy_pass http://localhost:3000; 
}

然后可以再加一个 location

location /api/ {
     proxy_pass http://localhost:3001; 
}

这样带有api路径的请求，都会到达3001端口的本地服务

ajax请求

用的是axios，这是我下载的模板里附带的，直接贴代码

import axios from 'axios';

const service = axios.create({
    // easy-mock服务挂了，暂时不使用了
    baseURL: 'http://localhost/api',
    timeout: 5000
});

export default service;

export const fetchData = query => {
    return request({
        url: './t',
        method: 'get',
        params: query
    });
};

const query = reactive({
	u: param.username,
	w: param.password,
});
var data = fetchData(query).then((res) => {
	alert(res.a);
});

服务器代码（spring cloud）

	@ResponseBody
	@RequestMapping(value = "server/t")
	public String test2(String u, String w) {
		System.out.println(u);
		System.out.println(w);
		return "{\"a\": 4}";
	}

请求参数名字一致，就能获取到，返回值是一个json

component: () => import("")加载

如果按照以下写法是没有问题的

permits.forEach((permit) => {
	pagesUse.push({
		//这里应当是别的线程，permit能用 ，permits[i]会报找不到
		component: () => import(permit.webpageChunk),
	});
});

for (var i = 0; i < permits.length; i++) {
	var permit = permits[i];
	//console.log(permit.webpageChunk);
	//这里是别的方法也行，应该是js的机制问题
	addPermit(pagesUse, permit);
}

这两个写法都是可以，原因是，这个方法调，把变量用复制到了别的方法内，相当于保存了变量数据。但是下边写法，所有页面就会是最后的页面，这种写法直接用数组，甚至会报错找不到数据。

TypeError: permits[i] is undefined

for (var i = 0; i < permits.length; i++) {
   var permit = permits[i];
   component: () => import(permit.webpageChunk),
}