vue跨域问题的解决调用别的网站接口实现详情的渲染

最新推荐文章于 2023-10-11 16:15:38 发布

摩羯座**

最新推荐文章于 2023-10-11 16:15:38 发布

阅读量1k

点赞数

分类专栏：笔记文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_48864616/article/details/122567831

版权

笔记专栏收录该内容

102 篇文章

订阅专栏

跨域问题解决
什么是跨域：协议域名/IP 端口这三个只要有一个不同，就会出现跨域。
json-server默认支持跨域。
但是在公司开发中，因为绝大多数都是前后盾分离的方式进行开发，在开发阶段进行接口调试的时候，肯定会出现跨域问题。怎么解决呢？ 使用代理。

代理：反向代理和正向代理。
正向代理：会隐藏了真实的【请求客户端】，服务端不知道真实的客户端是谁。客户端请求的服务都被【代理服务器】代替来请求了。

在vue.config.js中配置代理的方式，只能在开发阶段使用
实例
vue.config.js

module.exports = {
    //开发服务配置
    devServer:{
        //代理配置
        proxy:{
             //当我们的请求地址中有/api这个路径的时候，就会触发代理机制
             "/api":{
                 //我们要代理的地址。  将要代理的域名写在这里
                 target:"https://blog.youkuaiyun.com",
                 //是否跨域 需要设置此值为true 才可以让本地服务器代理我们发出的请求。
                  changeOrigin:true,

             },
              //http://localhost:8080/api/articles?type=more&category=web&shown_offset=1642476871467179 因为这个地址中有/api，所以触发代理，会将本地域名修改为代理的域名。
              // =》 http://localhost:8080 =》https://blog.youkuaiyun.com
        }
    }
}

main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
//导入axios
import axios from "axios";
//导入vue-axios插件
import VueAxios from "vue-axios";

Vue.config.productionTip = false;

axios.defaults.baseURL = "http://localhost:3000";

//想要在组件中使用axios，可以将导入的axios绑定到Vue的原型链上。
// Vue.prototype.$axios = axios;

//安装（注册）插件   //每一个插件都有install方法，安装其实就是执行该插件的install方法。
Vue.use(VueAxios, axios);

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

Home.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <br />
    <h1>优快云文章列表</h1>
    <div class="container">
      <p v-for="item in articles" :key="item.id">
        <a :href="item.url">{{ item.title }}</a>
      </p>
    </div>
  </div>
</template>

<script>
/**
 * 跨域问题解决
 * 什么是跨域： 协议 域名/IP 端口  这三个只要有一个不同，就会出现跨域。
 * json-server默认支持跨域。
 * 但是在公司开发中，因为绝大多数都是前后盾分离的方式进行开发，在开发阶段进行接口调试的时候，肯定会出现跨域问题。怎么解决呢？ 使用代理。
 *
 * 代理：反向代理和正向代理。
 * 正向代理：会隐藏了真实的【请求客户端】，服务端不知道真实的客户端是谁。客户端请求的服务都被【代理服务器】代替来请求了。
 *
 * 在vue.config.js中配置代理的方式，只能在开发阶段使用。
 */
export default {
  name: "Home",
  data() {
    return {
      articles: [],
    };
  },
  components: {
    // HelloWorld,
  },
  methods: {},
  mounted() {
    //发送axios请求，获取数据
   this.axios
        //前面的域名要换成本地的才可以生效
      .get(
         "http://localhost:8080/api/articles?type=more&category=web&shown_offset=1642476871467179"
      )
      .then((resp)=>{
        console.log(resp);
        this.articles = resp.data.articles;
      })
  },
};
</script>

<style scoped>
* {
  font-size: 24px;
}

button {
  margin: 10px;
  display: inline-block;
}
</style>