vue-cli项目中的proxyTable跨域问题小结

张金宝发布于2019-07-25 14:10 / 1167人阅读

摘要：由两部分组成回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。动态创建标签，设置其，回调函数在中设置在页面中，返回的作为参数传入回调函数中，我们通过回调函数来来操作数据。

什么是跨域？

同源策略规定了如果两个 url 的协议、域名、端口中有任何一个不等，就认定它们跨源了。

跨域的解决方式有哪几种？ 1.JSONP 是 JSON with padding（填充式 JSON 或参数式 JSON）的简写。

JSONP实现跨域请求的原理简单的说，就是动态创建

在实际工作中，前后端配合并不是那么默契，如果后台只给我接口，不能修改后台，怎么跨域？
在vue项目和react项目中的config文件中，都有一个proxy代理设置，这个就是用来在开发环境下进行跨域的。对其进行设置就能实现跨域。

通过vue-cli脚手架搭建出来的项目,修改config文件夹下的index.js中的proxyTable就能实现：

module.exports = {
  dev: {
    env: {
      NODE_ENV: ""development""
    },
    //proxy

   // 只能在开发环境中进行跨域，上线了要进行反向代理nginx设置
     proxyTable: {
       //这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用"http://40.00.100.100:3002/user/add"，直接写‘/api/user/add’即可
      "/api": {
         target: "http://news.baidu.com",//你要跨域的网址  比如  "http://news.baidu.com",
        secure: true,  // 如果是https接口，需要配置这个参数
        changeOrigin: true,//这个参数是用来回避跨站问题的，配置完之后发请求时会自动修改http header里面的host，但是不会修改别的
        pathRewrite: {
          "^/api": "/api"//路径的替换规则
          //这里的配置是正则表达式，以/api开头的将会被用用‘/api’替换掉，假如后台文档的接口是 /api/list/xxx
          //前端api接口写：axios.get("/api/list/xxx") ， 被处理之后实际访问的是：http://news.baidu.com/api/list/xxx
        }
      }
    },

让我们用本地起的服务来测试一下如何跨域 demo 0.用vue-cli搭建的脚手架，npm run dev 前端端口号一般是：http://localhost:8080 1.修改config文件中的index.js proxyTable:{}这段代码，替换掉即可：

module.exports = {
  dev: { 
     proxyTable: {
      "/api": {
         target: "http://localhost:8000",
        secure: true,   
        changeOrigin: true,
        pathRewrite: {
          "^/api": "/api"
        }
      }
    },

2.自己写一个后台，使用express+node.js ，不设置任何跨域头，代码如下：

注意自己需要在当前文件夹下提前准备一个list.json的文件，用来读取数据，返回数据。fs.readFile("./list.json","utf8",cb)

let express = require("express");
let app = express();
let fs = require("fs");
let list = require("./list");
let bodyParser = require("body-parser");
app.use(bodyParser.json());
app.use(express.static(__dirname));

//read
function read(cb) { //用来读取数据的，注意自己在mock文件夹下准备一些数据
  fs.readFile("./list.json","utf8",function (err,data) {
    if(err || data.length === 0){
      cb([]); // 如果有错误 或者文件没长度 就是空数组
    }else{
      cb(JSON.parse(data)); // 将读出来的内容转化成对象
    }
  })
}
//write
function write(data,cb) { // 写入内容
  fs.writeFile("./list.json",JSON.stringify(data),cb)
}
// 注意 没有设置跨域头
app.get("/api/list",function (req,res) {
  res.json(list);
});
app.listen(8000,()=>{
  console.log("8000 is ok");
});

3.前端调取的api代码：

import axios from "axios";
  axios.interceptors.response.use((res)=>{
  return res.data; // 在这里统一拦截结果 把结果处理成res.data
});
export function getLists() {
   return axios.get("/api/list");
}

4.在组件中进行跨域调取接口，打印数据

随便在一个文件中引入api测试一下 打印出来接口返回的数据
import {getLists} from "../../api/index"
  export default {
    async created(){
      let dataList=await getLists();
      console.log(dataList,"我请求的数据");
    },

5.查看控制台，打印出数据，没有保错，代表跨域成功，代理服务成功

开发环境成功跨域了，上线怎么办？

上线要进行nginx反向代理设置，同时应区分环境变量，具体设置请看图片：

欢迎更多补充，交流

云服务器 GPU云服务器跨域问题 cdn跨域问题 javascript跨域问题 js跨域问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/39793.html

vue-cli项目中的proxyTable跨域问题小结

摘要：由两部分组成回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。动态创建标签，设置其，回调函数在中设置在页面中，返回的作为参数传入回调函数中，我们通过回调函数来来操作数据。什么是跨域？同源策略规定了如果两个 url 的协议、域名、端口中有任何一个不等，就认定它们跨源了。跨域的解决方式有哪几种？ 1.JSONP 是 JSON with ...

lidashuang 2019-08-26 11:40 评论0 收藏0
Node +MongoDB 搭建后台的全过程

摘要：搭建后台的全过程近期基于搭建前端项目，搭建后台，遇到了不少问题，总结博客如下，有什么不正确的地方，请大家批评指正是非关系型数据库。是用来启动的，是的命令行客户端。 Node + mongoDB 搭建后台的全过程近期基于 vue-cil 搭建前端项目， express + mongoose 搭建后台，遇到了不少问题，总结博客如下，有什么不正确的地方，请大家批评指正^ _ ^！ mong...

voidking 2019-06-26 17:47 评论0 收藏0
vue-cli配置proxyTable 跨域请求

摘要：本地服务启动端口，项目启动端口，当前端用户提交登录信息到后端，便产生跨域，可以配置解决跨域问题一进入项目下的文件，添加接口的域名如果是接口，需要配置这个参数如果接口跨域，需要进行这个参数配置此处的设为二在前端发送请求页面，设置请求三启动本地express服务启动端口3000， vue-cli项目启动端口8080，当前端用户提交登录信息到后端，便产生跨域，可以配置 proxyTab...

caoym 2019-08-23 17:00 评论0 收藏0
vue-cli本地环境API代理设置和解决跨域

摘要：我们将引入我们配置的中，再将修改如下路径你们改下将印射为接口域名如果是接口，需要配置这个参数是否跨域需要的之后不管是生产环境，还是开发环境，都不用再修改我们的请求地址了。前言我们在使用vue-cli启动项目的时候npm run dev便可以启动我们的项目了，通常我们的请求地址是以localhost:8080来请求接口数据的，localhost是没有办法设置cookie的。我们可以...

lakeside 2019-08-20 19:09 评论0 收藏0