uniAPP跨域问题解决

利用node.js搭建服务端

一、新建项目目录并且利用node.js初始化项目 （截图）

image.png

二、新建一个入口文件 index.js （截图）

image.png

三、安装一个express依赖 （截图）

image.png

如果安装太慢，建议将npm registry更改为淘宝镜像。

1、临时使用

npm --registry https://registry.npm.taobao.org install express

2、永久使用

npm config set registry https://registry.npm.taobao.org

配置后可通过下面方式来验证是否成功：

npm config get registry
image.png

四、配置入口文件（index.js）并启用服务器

1、配置入口文件（index.js）

//（1）引入express
const express=require("express"); 

//（2）实例化
const app=express(); 

//（3）监听一个端口3000
app.listen(3000,()=>{//为了监听服务正在运行，在控制台打印一个内容
    console.log("----------api 3000-------------")
})

//（4）请求一个路由 "/api/list"
app.get("/api/list",(req,res)=>{
    var arr = ["北京","上海","广州","深圳","安徽合肥"];
    res.json(arr);   //返回请求结果
})

启动服务端（命令截图）

image.png

这里使用 node-dev命令启动服务，如果没有安装，可先使用命令全局安装一下，“npm i node-dev -g” 。

访问测试（截图）

image.png

拓展：从APP项目（前端）如何访问服务器？

说明：

APP项目地址及端口是：localhost:8081
服务器地址及端口是：localhost:3000
地址或者端口不同，就会涉及跨域问题。解决跨域问题，可从服务器端或者项目前端解决。

1、demo.vue 代码如下：

<template>
    <view class="content">
        <h1>demo页面</h1>
        
        <view class="btn">
            <button type="primary" @click="myClick">请求数据</button>
            <text>从node服务器上请求数据,只要域名或者ip不同或者端口号不同，都涉及<text class="orangered">跨域</text>问题。</text>
        </view>
        
        <!-- 将拿到的数据渲染到页面，循环遍历数组 -->
        <view>
            <text  v-for="(item,index) in list" :key="index">{{item}}</text>
        </view>
    </view>
    
</template>

<script>
    export default {
        data() {
            return {
                list:[] //城市列表
            }
        },
        methods: {
            myClick(){
                uni.request({
                    url:"http://localhost:3000/api/list",
                    success:res=>{
                        console.log(res);
                        var list = res.data; 
                        this.list = list;
                    }
                })
            }
        }
    }
</script>

<style>
    .content{
        padding: 20rpx;
    }
    .btn{
        margin: 20rpx 0;
    }
    h1{
        background-color: yellow;
        text-align: center;
    }
    .orangered{
        background-color: orangered;
        color: white;
        padding: 0 10rpx;
    }
    text{
        display: inline-block;
        background-color: deepskyblue;
        padding: 10rpx 20rpx;
        margin: 20rpx;
        border-radius: 10rpx;
        color: white;
    }
</style>

运行到微信开发工具，点击请求按钮，控制台打印输出结果。——成功获取数据

image.png

运行到H5端，报错！因为存在跨域问题。如下图所示：

image.png

解决跨域问题的两种方法：

1、服务器端解决方法

步骤：

（1）服务器端安装 cors

image.png
image.png

（2）配置index.js文件（引入cors并使用cors）

image.png

node项目的index.js 代码如下：

//1引入express
const express=require("express"); 

//引入 cors
const cors=require("cors");

//2实例化
const app=express(); 
app.use(cors()); //注意 cors() 有括号

//3监听一个端口3000
app.listen(3000,()=>{//为了监听服务正在运行，在控制台打印一个内容
    console.log("----------api 3000--------------")
})

//4请求一个路由 "/api/list"
app.get("/api/list",(req,res)=>{
    var arr=["北京","上海","广州","深圳","安徽合肥"];
    res.json(arr); //返回请求结果
})

（3）H5端测试请求数据——成功请求到数据

image.png

注意：

因为有缓存的原因，即使服务器端关闭 cors 引入和使用，已经访问的数据依然能够再次被看到。可以通过清除浏览器缓存的方法，清除 访问到本地的数据。

2、前端解决方法—— 配置代理，解决跨域

（1）先关闭 cors 服务

image.png

（2）配置APP项目中 manifest.json 文件，设置代理规则。（参照： webpack.config.js）

image.png
image.png

注意：每次修改 manifest.json 之后都要重启服务。

APP项目中 manifest.json文件关于H5端代码如下：

 "h5" : {
        "title" : "H5",
        "devServer": {
            "proxy":{
                //配置代理：只要 遇到 /api 都改为  http://localhost:3000
                "/api":{
                    "target":"http://localhost:3000"
                }
            }
        }
    }

（3）重启H5端服务（重新运行）

image.png

至此，H5端就可以顺利访问服务器的数据

但是，小程序端又又不可以访问了，接下来继续优化并解决小程序端的访问。

（4）利用平台判断 完善demo.vue

image.png

APP项目的demo.vue 代码如下：

<template>
    <view class="content">
        <h1>demo页面</h1>
        
        <view class="btn">
            <button type="primary" @click="myClick">请求数据</button>
            <text>从node服务器上请求数据,只要域名或者ip不同或者端口号不同，都涉及<text class="orangered">跨域</text>问题。</text>
        </view>
        
        <!-- 将拿到的数据渲染到页面，循环遍历数组 -->
        <view>
            <text  v-for="(item,index) in list" :key="index">{{item}}</text>
        </view>
    </view>
    
</template>

<script>
    export default {
        data() {
            return {
                list:[] //城市列表
            }
        },
        methods: {
            myClick(){
                var url = "/api/list";  //先给 url设置默认值
                // 平台判断 - 如果不是H5 则  url = "http://localhost:3000/api/list"
                // #ifndef H5   
                    var url = "http://localhost:3000/api/list"
                // #endif
                
                uni.request({
                    // url:"http://localhost:3000/api/list",
                    // url:"/api/list",
                    url:url,
                    success:res=>{ //请求成功时，执行以下代码
                        console.log(res);
                        var list = res.data; 
                        this.list = list;
                    },
                    fail:err=>{ //请求失败时，执行以下代码
                        console.log(err)
                    }
                })
            }
        }
    }
</script>

<style>
    .content{
        padding: 20rpx;
    }
    .btn{
        margin: 20rpx 0;
    }
    h1{
        background-color: yellow;
        text-align: center;
    }
    .orangered{
        background-color: orangered;
        color: white;
        padding: 0 10rpx;
    }
    text{
        display: inline-block;
        background-color: deepskyblue;
        padding: 10rpx 20rpx;
        margin: 20rpx;
        border-radius: 10rpx;
        color: white;
    }
</style>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容