• 关于跨域请求数据的问题


    vue-resource 跨域请求

    1、客户端:

      (1)在webpack.config.js(config—>index.js)文件里设置代理(可以同时设置多个)

    dev: {
        env: require('./dev.env'),
        port: 8080,  //设置访问的端口号
        autoOpenBrowser: true, //自动打开浏览器
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: {
            '/api': {
                target: 'http://localhost:8888', //设置调用接口域名和端口号别忘了加http
                changeOrigin: true,
                pathRewrite: {
                    '^/api': '/' //这里理解成用‘/api’代替target里面的地址,组件中我们调接口时直接用/api代替
                        // 比如我要调用'http://0.0:300/user/add',直接写‘/api/user/add’即可 代理后地址栏显示/
                }
            }
        }
      ...

      (2)在组件中编辑(下面是POST方法,GET方法也一样)

    this.$http.post("http://localhost:8888/login?user=blue&pass=123456")
          .then(function(response) {
            console.log("成功");      
            console.log(response.body);
          }, function(response) {
            console.log("失败");
            console.table(response);
          });
    
    //或者使用axios(记得安装和引入axios模块)
    import axios from "axios"
    axios.get("api/login?user=blue&pass=123456")
          .then(function(response) {
            console.log("成功");      
            console.log(response.data);
          }, function(response) {
            console.log("失败");
            console.table(response);
          });

    2、服务端:

      nodeJS 用express作为服务端

    server.use('/login', function (req, res){
        res.header("Access-Control-Allow-Origin", "*");
        res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
        res.header("Access-Control-Allow-Headers", "X-Requested-With");
        res.header('Access-Control-Allow-Headers', 'Content-Type');
       ...
  • 相关阅读:
    高级特性(7)- 高级AWT
    洛谷 P1948 [USACO08JAN]电话线Telephone Lines
    洛谷 P2015 二叉苹果树
    洛谷 P2014 选课
    洛谷 P1560 [USACO5.2]蜗牛的旅行Snail Trails(不明原因的scanf错误)
    cogs 10. 信号无错传输
    cogs 9. 中心台站建设。。。
    洛谷 P1731 生日蛋糕
    洛谷 P1092 虫食算
    洛谷 P1034 矩形覆盖
  • 原文地址:https://www.cnblogs.com/lianchenxi/p/9668663.html
Copyright © 2020-2023  润新知