跨域问题

wp231957 · 发表于 2020-5-7 15:40:50

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由 wp231957 于 2020-5-7 15:48 编辑

前端：H5+VUE+AXIOS（非项目工程，就是一个单独的HTML文档）
网上很多资料都是修改配置文件，使用代理，可是我不是web工程，该咋修改代理？

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <title>vue+axios测试</title>

</head>

<body>
    <div id="w_1">
        <ul>
            <li v-for="item in jokes">{{item}}</li>
        </ul>
        <br><input type="button" value="get" class="get" v-on:click="getjoke">
    </div>
    <script>
        var url = "http://api.zhuishushenqi.com/ranking/gender";

        var app = new Vue({
            el: "#w_1",
            data: {
                jokes: ["狠好看的笑话"]
            },
            methods: {
                getjoke: function(event) {
                    let that = this;
                    axios.get(url).then((response) => {
                        console.log(response);
                    }, (err) => {
                        console.log(err);
                    });
                    //event.target.value="再来一批"
                },
            }
        })
    </script>
</body>

</html>

后台：NODE +EXPRESS

var express = require('express');
var http = require('http');
var fs = require('fs');
var app = express();
var path = require('path');

app.use(express.static(path.join(__dirname, 'public')));

app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Content-type");
    res.header("Access-Control-Allow-Methods", "GET");
    next();
});

app.get('/', function(req, res, next) {
    res.writeHead(200, { 'Content-Type': 'text/html' })
    fs.readFile('./xiaoshuo.html', 'utf-8', function(err, data) {
        if (err) {
            throw err;
        }
        res.end(data);
    });
});

app.listen(3000);
console.log("监听端口 3000");
//console.log(app);

测试环境：chrome

几张相关图片：

补充， var url = "http://api.zhuishushenqi.com/ranking/gender"; 这个我单独在浏览器（CHROME）运行是能拿到数据的

yuesezhenmei · 发表于 2020-5-10 13:01:01

有兴趣可以看看这个码云：https://gitee.com/wen_jun_zhang/agency_completion
自己写的项目  webpack搭建的
全栈目前还在慢慢写
里面的用户登录我写完了  会返回用户已保存的数据
你可以参考  我用nodejs写的API  (你可以看app.js我的跨域是没问题的)

wp231957 · 发表于 2020-5-13 13:46:56

yuesezhenmei 发表于 2020-5-10 13:01
有兴趣可以看看这个码云：https://gitee.com/wen_jun_zhang/agency_completion
自己写的项目 webpack搭建 ...

我看了一下，你的app.js 请问，你的前端跨域代码呢在哪里

yuesezhenmei · 发表于 2020-5-13 14:07:46

wp231957 发表于 2020-5-13 13:46
我看了一下，你的app.js 请问，你的前端跨域代码呢在哪里

//设置跨域
app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With,content-type, Authorization");
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By",' 3.2.1');
res.header("Content-Type", "application/json;charset=utf-8");
next();
});

yuesezhenmei · 发表于 2020-5-13 14:10:44

wp231957 发表于 2020-5-13 13:46
我看了一下，你的app.js 请问，你的前端跨域代码呢在哪里

我用vue-resource 和axios 请求这样设置都没跨域问题

wp231957 · 发表于 2020-5-13 14:37:25

yuesezhenmei 发表于 2020-5-13 14:07
//设置跨域
app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", ...

这段代码我懂，我的意思是 axios调用代码在哪里？？
比如：类似
<script>
      var url = "http://api.zhuishushenqi.com/ranking/gender";

      var app = new Vue({
         el: "#w_1",
         data: {
            jokes: ["狠好看的笑话"]
         },
         methods: {
            getjoke: function(event) {
                  let that = this;
                  axios.get(url).then((response) => {
                     console.log(response);
                  }, (err) => {
                     console.log(err);
                  });
                  //event.target.value="再来一批"
            },
         }
      })
</script>

yuesezhenmei · 发表于 2020-5-13 15:32:33

wp231957 发表于 2020-5-13 14:37
这段代码我懂，我的意思是 axios调用代码在哪里？？
比如：类似

src/components/index.vue 里面的 mounted 我写了一个axios测试

yuesezhenmei · 发表于 2020-5-13 15:37:04

wp231957 发表于 2020-5-13 14:37
这段代码我懂，我的意思是 axios调用代码在哪里？？
比如：类似

写法不一样是我在src/main.js 注册axios 改了使用方法

wp231957 · 发表于 2020-5-13 15:40:02

yuesezhenmei 发表于 2020-5-13 15:32
src/components/index.vue 里面的 mounted 我写了一个axios测试

你这个我猜测是跨自己写的域？？
我想跨的是外部url 比如百度啊淘宝啊之类的

kogawananari · 发表于 2020-8-29 00:43:15

wp231957 发表于 2020-5-13 15:40
你这个我猜测是跨自己写的域？？
我想跨的是外部url 比如百度啊淘宝啊之类的

类似美团开放平台饿了么开发平台上提供的open api 都是可以跨域的（就是让你用的
其他很少有服务器直接允许你的跨域只能vue脚手架来设置了

账号		自动登录	找回密码
密码			立即注册