如何解决跨域问题以及vuecli开发环境用代理服务器解决跨域问题

前言:

在此之前,我们应该知道什么是跨域?和为什么会跨域?以及跨域的基本解决方法.

同时扩展在vuecli开发环境如何用代理服务器解决跨域问题

一、跨域:

1.跨域的理解

跨域即网页所在url(浏览器地址栏的地址)的协议, 域名, 端口号, 和Ajax请求url的协议, 域名, 端口号有任一对应不上的情况就发生跨域.跨域是是浏览器对ajax做出的限制.

2.出现跨域的报错展示

 二、解决跨域问题(CORS/JSONP )

1.CORS(需要后端大佬实现)

1.1cors原理

通过服务器设置响应头为: Access-Control-Allow-Origin: *

只有后端大哥才能开启cors,这样前端才能得到跨域请求的权限

1.2方法:

下载安装cors: 
	npm i cors
加载cors: 
	const cors = require('cors')
注册中间件
	app.use(cors())

1.3查看是否有cors

2.jsonp方式

注意:jsonp和json没有一毛钱关系,不要混淆二者哦~同时jsonp值只支持GET请求

2.1、jsonp原理(前端+后端)

跨域是浏览器对ajax的限制,jsonp解决跨域的原理正是避开浏览器,利用script的src属性发送请求,

2.2、代码实现原理

• 前端用script+src属性, 发送函数名给后台, 同时准备好同名的函数, 准备接收数据
• 后端返回的字符串一定用方法名(数据字符串)格式返回, 到script标签中执行
• 调用函数名, 并传递数据

//client客户端
<script>
    function abc(res){
      console.log(res)
    }
  </script> -->
  <!-- 
      前端:json的做法
      原理:script的src请求,不会受到跨域的限制
      缺点:只能发起GET方式的请求
   -->
<script src="http://localhost:6900/api/goodsList?callback=abc"></script> 

//server服务端
// 导入express
const express = require('express')
const app = express()
app.get('/api/goodsList', (req, res) => {
  // 1 拿到前端的方法名
  console.log(req.query.callback)
  // 2 拼接返回给前端script内执行的js代码字符串
  let fn = req.query.callback
  let arr = JSON.stringify(["santa", "claus"])
  let resStr = fn + `(${arr})`
  // 数组字符串拼接 + 让数组变成字符串(里面字符串双引号里面的值,就变成了没有引号的变量) 
  // 3 把js代码字符串返回给前端script标签
  res.send(resStr)
})
app.listen('6900', () => {
  console.log('请访问:http://localhost:6900')
})

2.3开发中利用jquery实现

<!-- 练习:工作中使用jsonp -->
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
   <script>
    $.ajax({
      url:'https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=34835,34948,34068,31254,34711,34584,34504,34710,34917,34579,34813,26350,34972,34867,22157,35018&wd=santa&req=2&csor=5&pwd=sant&_=1636016480505',
      dataType:'jsonp',//(关键代码)要设置jsonp,jquery封装ajax方法内就不会使用默认ajax请求了,而是换成动态创建script标签发送src请求
      json:'cb',
      success: res => {
        // jsonp => jquery内部会创建一个方法,接收后端返回的数据后,再调用success把后端的值传给你
        console.log(res)
      }
    })
   </script>

思考:

如果我们只有后端的接口地址,后端jsonp也不没有cors也没有,我们应该怎么办呢?比如:我们想访问网易新闻的的接口,但是网易的后端我们根本接触不到,那我们如何获取数据呢?

答案：用代理服务器解决跨域问题。我们可以在本地弄个服务器, 然后用服务器请求后台服务器接口地址

三、uecli脚手架环境用代理服务器解决跨域

vuecli脚手架, 启动的webpack开发服务器,就能做代理转发 ，我们只需要修改webpack开发服务器的配置即可

3.1跨域的情况

 3.1.1动手试试

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 1.先 npm i axios 下载axios包
// 2.引入axios
import axios from 'axios'

Vue.config.productionTip = false
// 3.发送axios请求
axios({
  url: 'http://c.m.163.com/nc/article/headline/T1348647853363/0-40.html'
}).then(res => {
  console.log(res)
})
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

3.2、使用代理服务器效果

数据请求成功

 3.3动手试试

3.3.1.vue.config.js配置

module.exports = {
  devServer: {
    proxy: {
      // http://c.m.163.com/nc/article/headline/T1348647853363/0-40.html
      '/api': { // 请求相对路径以/api开头的, 才会走这里的配置
        target: 'http://c.m.163.com', // 后台接口域名
        changeOrigin: true, // 改变请求来源(欺骗后台你的请求是从http://c.m.163.com)
        pathRewrite: {
          '^/api': '' // 因为真实路径中并没有/api这段, 所以要去掉这段才能拼接正确地址转发请求
        }
      }
//代码流程分析
/*
    前端发起请求->请求后端接口->接口地址/api/nc/article/headline/T1348647853363/0-40.html->
/api 开头命中配置项proxy中 "/api" 触发target ->拼接后台接口域名 形成
=>http://c.m.163.com/api/nc/article/headline/T1348647853363/0-40.html
 但是由于后端实际请求地址不应该有/api 字段,所以要重写路径,利用pathRewrite属性去除/api 
==>后台地址+正确的接口地址
注意:
1.是否需要去除命中项(pathRewrite)要根据项目实际情况,/api也可以成其他单词字段,代码相对应就可以了
2.如果项目中有配置基地址则执行过程是:
发请求
->配置基地址
->基地址+接口地址拼接
 ->命中proxy的配置项
->最后拼接后台域名
 ==>后台地址+基地址+接口地址

*/
    }
  }
}

3.3.2.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.config.productionTip = false
// 发送axios请求
axios({
  url: '/api/nc/article/headline/T1348647853363/0-40.html'
}).then(res => {
  console.log(res)
})
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')