前端跨域的解决方式

跨域是浏览器为了安全做出的限制策略
浏览器请求必须遵循同源策略：同域名，同协议，同端口

三种使用最广的解决方案

（1）CORS 跨域 - 只需服务端进行设置，不需要前端做什么

说明：后台允许前端某个站点进行访问
Access-Control-Allow-Credentials: true
表示允许前端携带cookie
Access-Control-Allow-Origin: http://localhost:8080
表示允许跨域访问的地址

（2）JSONP 跨域

需要前后端的配合，前端需要安装JSONP 插件，后台需要做适配，因为JSONP 的时候会发一个callback参数过去，然后后台完callback里写如数据
jsonp跨域原理https://blog.csdn.net/badmoonc/article/details/82289252
jsonp 的请求不是一个真正的请求，而是一个js脚本
jsonp 插件语法：
要跨域的百度搜索接口

https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=1&cb=callback

1.安装

npm install jsonp --save-dev

2.引入jsonp

import jsonp from 'jsonp'

3.请求数据

export default {
    created(){
        //jsonp请求数据
        var keyword = "李白";
        var baseUrl = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su";
        var _url = baseUrl + '?wd='+keyword+'&cb=callback';
        jsonp(_url,(res)=>{
            callback(res);
        })

    //注意:callback需挂载到window下
        window.callback = function(data){
            console.log(data)
        }
    }
}

注意点：

jsonp 只能用get方法请求，不能用post
callback需要挂载到window下

（3）接口代理

通过修改nginx服务器配置来实现
说明：前端修改，后台不动
随心所欲，可以用任何想用的方式来实现请求
在开发环境中通过配置webpack来开启代理服务
在项目根目录下，创建vue.config.js文件（webpack配置文件）
使用axios 发送请求时，baseURL不设置或设置http://localhost:8080都可以，

module.exports = {
  devServer:{
    host: 'localhost',
    prot: 8080,
    proxy: {
      // 拦截到 /api
      '/api' : {
        // 转接的 目标服务器地址
        target: 'https://www.baidu.com', // http://localhost:3000
        changeOrigin: true,
        pathRewrite: {
          // 将拦截到的/api 置为空，这样在拼接的时候就会自动去掉/api
          '^/api' : ''
        }
      }
    }
  }
}

总结，使用接口代理方式的好处就是，更安全，可以像访问同源接口一样编写代码，可以使用axios发送请求

后端设置进行跨域设置

使用express框架的的，安装cors 插件，
npm install cors --save
const cors = require('cors') // 第一步：引入cors插件
app.use(cors()) // 第二步use(corss())

var createError = require('http-errors')
var express = require('express')
const bodyParser = require('body-parser')
var path = require('path')
var cookieParser = require('cookie-parser')
var logger = require('morgan')
const cors = require('cors')   // 第一步：引入cors插件


var usersRouter = require('./routes/users')

var app = express()

// 改写
var http = require('http')
var server = http.createServer(app)



app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: true }))
app.use(cookieParser())
// 静态资源
app.use(express.static(path.join(__dirname, 'public')))

app.use(cors())   // 第二步use(corss())
// post 请求解析
// app.use(bodyParser.urlencoded({ extended: true }))
app.use('/users', usersRouter)

server.listen('3000', () => {
  console.log('http://localhost:3000/')
  }
)

最后编辑于：2020.08.28 12:36:33