node+vue 解决跨域问题

第一次使用CSDN记录自己在平时项目中踩到的坑,各位大神不喜勿喷!同时也欢迎各位交流学习。

我在写node+express+vue+mysql的项目中,本来前一天跑的正常的项目,结果第二天去就发现出错,一直找不到后台接口的地址。后来还是找到大佬帮忙才得以解决啊!

1. 在使用axios拦截请求时,配置默认的host:
const baseURL = 'http://localhost:3000/'
axios.defaults.baseURL = baseURL

2. 在config文件夹的index.js中设置:
proxyTable: {
 '/api': {
    target: 'http://localhost:3000',// 请求的第三方地址 
    changeOrigin: true,
    pathRewrite: {
        '^/api': ''
    }
  }
}

上述两处的端口号必须相同,它们都指向后台接口。。。。
此时,后台能正常连接到接口并返回数据,但报跨域的错误(3000端口号去访问8000端口号),而且在请求头中Connection为close,正常情况下应该是keep-alive。

跨域

我们首先来了解一下到底什么是跨域?

跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript实施的安全限制。

那么什么又是同源策略呢?

同源,是指域名、协议、端口均相同:

http://www.nealyang.cn/index.html 调用   http://www.nealyang.cn/server.php    非跨域
http://www.nealyang.cn/index.html 调用   http://www.neal.cn/server.php    跨域,主域不同
http://abc.nealyang.cn/index.html 调用   http://def.neal.cn/server.php    跨域,子域名不同
http://www.nealyang.cn:8080/index.html 调用   http://www.nealyang.cn/server.php  跨域,端口不同
https://www.nealyang.cn/index.html 调用   http://www.nealyang.cn/server.php    跨域,协议不同
localhost   调用 127.0.0.1    跨域

解决跨域

在node后台起服务的文件中(我的是把所有的后台文件放在server文件夹中,在此文件夹中的index.js中起后台服务)使用app.use()来设置请求头:

app.use((req, res, next) => {
	res.header('Access-Control-Allow-Origin', '*') //允许所有不同源的地址访问
	res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization') //Content-Type必须要设置,Authorization是用户登录注册时存入的token值,可根据需求来设置,还有其他的都需要用逗号隔开
	res.header('Access-Control-Allow-Credentials', true) // 这个必须要设置,否则解决跨域无效,注意true是字符串
	next()
})

至此,解决跨域问题就结束了,欢迎大家前来交流探讨!

猜你喜欢

转载自blog.csdn.net/Daisy_1/article/details/87968023