脚本宝典收集整理的这篇文章主要介绍了最实用的手把手教你前端(本地和部署的)跨域问题解决,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
首先什么是跨域:下面就是非官方,大家通常喜欢说的就是浏览器不能执行其他网站的脚本;类似于我要执行其他网站的接口。就是说它是由浏览器的同源策略造成的,是浏览器加的安全机制。 同源策略:不懂得就百度。域名,协议,端口相同;那么跨域是啥:来来来,敲黑板----->域名,协议,端口任一一个不同都存在跨域,包括协议(就是http/https)。 下面教你如何玩转跨域。首先找到config.js文件夹。在代理服务处加上你要调用的服务;
proxy: {
[process.env.VUE_APP_BASE_API]: {
target: `http://192.168.1.666:8080`,
changeOrigin: true,
pathRewrite: {
["^" + process.env.VUE_APP_BASE_API]: "/"
}
},
//VUE_APP_BASE_API_wlw----》这是你的url路径
[process.env.VUE_APP_BASE_API_wlw]: {
target: "http://xjz.202166.com",//这是在页面中要访问的服务。
changeOrigin: true,
pathRewrite: {
["^" + process.env.VUE_APP_BASE_API_wlw]: "/"
}
},
},
下面VUE_APP_BASE_API_wlw给他定义一个名称,wlwapi是你本地用的
# 开发环境配置
ENV = 'development'
# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true
# url根路径
VUE_APP_BASE_API_wlw = "/wlwapi"
然后下一步新建一个request.js文件,然后创建一个新实例,
然后在调用JS接口文件引入上面的请求JS文件。import requestwlw from "@/utils/requestwlw";
// 物联网接口
export function wlwInfo(query) {
return requestwlw({
url: `/departww/queryDevicexjzsix`,
method: "post",
data: query
});
}
使用时就可以把接口的方法引入到你调用的页面,使用就可以了。 如果部署到线上的话,就往下看, 注意:项目打包时,config.js里面的文件不会被打包。 刚才我们在前面用到了根路径(wlwapi这就是个前缀),现在就是再写一个线上使用的名字(wlwWorkP)
# 生产环境配置
ENV = 'production'
# url根路径
VUE_APP_BASE_API_wlw = "/wlwWorkP"
下面打包好以后,部署到相关服务上面,在你部署项目的外部文件有一个conf文件夹,在文件夹里找到ngix文件,找到你的配置
server {
listen 80;
location / {
root html;//这是项目入口夹,就是上面用红线标注的。
index index.html index.htm;// 这是打包后的文件
}
}
location /wlwWorkP/ {
proxy_pass http://xjz.202166.com/;#代理所有wlwWorlp开头的请求
proxy_connect_timeout 60;
proxy_read_timeout 60;
proxy_send_timeout 60;
}
然后保存文件,打开命令窗,Nigx -s reload,就是重启一下就可以了。 然后打开线上地址,找到跨域的接口处,看一下请求地址。
如有不对之处,请大家指正。谢谢。以上是脚本宝典为你收集整理的最实用的手把手教你前端(本地和部署的)跨域问题解决全部内容,希望文章能够帮你解决最实用的手把手教你前端(本地和部署的)跨域问题解决所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。