跨域问题
本帖最后由 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）运行是能拿到数据的
有兴趣可以看看这个码云：https://gitee.com/wen_jun_zhang/agency_completion
自己写的项目webpack搭建的
全栈 目前还在慢慢写
里面的用户登录 我写完了会返回用户已保存的数据
你可以参考我用nodejs写的API(你可以看app.js我的跨域是没问题的)
yuesezhenmei 发表于 2020-5-10 13:01
有兴趣可以看看这个码云：https://gitee.com/wen_jun_zhang/agency_completion
自己写的项目webpack搭建 ...
我看了一下，你的app.js请问，你的前端跨域代码呢在哪里
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();
}); wp231957 发表于 2020-5-13 13:46
我看了一下，你的app.js请问，你的前端跨域代码呢在哪里
我用vue-resource 和axios 请求 这样设置 都没跨域问题 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> wp231957 发表于 2020-5-13 14:37
这段代码 我懂，我的意思是 axios调用代码在哪里？？
比如：类似
src/components/index.vue 里面的 mounted 我写了一个axios测试 wp231957 发表于 2020-5-13 14:37
这段代码 我懂，我的意思是 axios调用代码在哪里？？
比如：类似
写法不一样是我在src/main.js 注册axios 改了 使用方法 yuesezhenmei 发表于 2020-5-13 15:32
src/components/index.vue 里面的 mounted 我写了一个axios测试
你这个我猜测是 跨自己写的域？？
我想跨的是外部url比如 百度啊淘宝啊之类的 wp231957 发表于 2020-5-13 15:40
你这个我猜测是 跨自己写的域？？
我想跨的是外部url比如 百度啊淘宝啊之类的
类似美团开放平台 饿了么开发平台上提供的open api 都是可以跨域的（就是让你用的
其他很少有服务器直接允许你的跨域 只能vue脚手架来设置了
页:
[1]