apache vue跨域_详解VueJs前后端分离跨域问题

使用vue-cli搭建的vue项目

可以使用在项目内设置代理(proxyTable)的方式来解决跨域问题

设置配置项的目录在config下的index.js，主要通过配置proxyTable项，设置代理指向你的后台地址

dev: {

env: require('./dev.env'),

port: 8085,

autoOpenBrowser: true,

assetsSubDirectory: 'static',

assetsPublicPath: '/',

proxyTable: {

'/agent': {

target: 'http://127.0.0.1:7105/',

changeOrigin: true,

pathRewrite: {

'^/agent': ''

}

}

},

// CSS Sourcemaps off by default because relative paths are "buggy"

// with this option, according to the CSS-Loader README

// (https://github.com/webpack/css-loader#sourcemaps)

// In our experience, they generally work as expected,

// just be aware of this issue when enabling this option.

cssSourceMap: false

}

前端使用vue-resource来发起请求时

//在main.js中设置公用的地址

Vue.prototype.rootUrl = '/agent/';

//在具体page中发起请求的方式

that.$http.post(this.rootUrl + 'login', parms).then(function (response) {

// 响应成功回调

console.log(response);

}, function (response) {

// 响应错误回调

});

其他方式搭建的前端项目，通过使用nginx启动前端服务同时配置代理

下列是我的nginx配置文件，不管是通过什么方式搭建的前端项目，构建成功后都会输出一个dist文件，我们只需要将nginx服务目录指向你的dist文件下你项目的入口文件即可

我的文件目录是 root D:\openplatform\portal\webapp\dist; 更改此条配置到你的目录 我入口文件名称是index.html 使用的是vue-cli打包的项目，参考vue-cli npm run build的dist目录，指向那个目录下

#user nobody;

worker_processes 4;

#error_log logs/error.log;

#error_log logs/error.log notice;

#error_log logs/error.log info;

#pid logs/nginx.pid;

events {

worker_connections 1024;

}

http {

include mime.types;

default_type application/octet-stream;

#log_format main '$remote_addr - $remote_user [$time_local] "$request" "$status" $body_bytes_sent "$http_referer" "$http_user_agent" "$http_x_forwarded_for" "$gzip_ratio" $request_time $bytes_sent $request_length';

log_format main '[$time_iso8601] [$remote_addr] [$request] [$http_user_agent] [$cookie_customerID_cookie_flag] [$args]';

access_log logs/access.log main;

sendfile on;

#tcp_nopush on;

#keepalive_timeout 0;

keepalive_timeout 65;

gzip on;

gzip_min_length 1k;

gzip_buffers 4 16k;

gzip_http_version 1.0;

gzip_comp_level 3;

gzip_proxied any;

gzip_types *;

server {

listen 80;

root D:\openplatform\portal\webapp\dist;

index index.html;

location / {

try_files $uri $uri/ @router;

index index.html;

}

location @router {

rewrite ^.*$ /index.html last;

}

location ^~/agent/ {

proxy_pass http://127.0.0.1:7105/;

proxy_redirect http://127.0.0.1:7105/ /;

proxy_set_header Host $host;

proxy_set_header X-Real-IP $remote_addr;

proxy_set_header REMOTE-HOST $remote_addr;

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

proxy_connect_timeout 600s;

proxy_read_timeout 600s;

proxy_send_timeout 600s;

}

}

# another virtual host using mix of IP-, name-, and port-based configuration

#

#server {

# listen 8000;

# listen somename:8080;

# server_name somename alias another.alias;

# location / {

# root html;

# index index.html index.htm;

# }

#}

# HTTPS server

#

#server {

# listen 443 ssl;

# server_name localhost;

# ssl_certificate cert.pem;

# ssl_certificate_key cert.key;

# ssl_session_cache shared:SSL:1m;

# ssl_session_timeout 5m;

# ssl_ciphers HIGH:!aNULL:!MD5;

# ssl_prefer_server_ciphers on;

# location / {

# root html;

# index index.html index.htm;

# }

#}

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。